I have a form to add customers to a table-mysql, but I like put a validation for a input form, just accetp hexadecimal 0-9 and a-f just lowercase and on this pattern: xxxx.xxxx.xxxx when "x" can be 0-9 and a-f and no empty.
my form:
<form name="product_form" class="form-horizontal" role="form" novalidate>
<form-element label="MAC ADDRESS" mod="product">
<input type="text" class="form-control" name="name"
placeholder="Mac Address" ng-model="product.name" focus/>
</form-element>
</form>
The validation works fine. It will throw you error unless you match the whole pattern.xxxx.xxxx.xxxx
<form name="product_form" class="form-horizontal" role="form" novalidate>
<form-element label="MAC ADDRESS" mod="product">
<input type="text" class="form-control" name="name"
placeholder="Mac Address" ng-model="product.name" focus required ng-pattern="/[a-f0-9]{4}\.[a-f0-9]{4}\.[a-f0-9]{4}/" />
<span ng-if="product_form.name.$error.required">This field is required</span>
<span ng-if="product_form.name.$error.pattern">Pattern doesnot match</span>
</form-element>
</form>
Here is the JSFIDDLE
To do that or any other pattern based verification you can use the ng-pattern built in directive input https://docs.angularjs.org/api/ng/directive/input.
in your case you just need to use the regex:
/[a-f0-9]{4}\.[a-f0-9]{4}\.[a-f0-9]{4}/
so your input becomes:
<input type="text" class="form-control" name="name"
placeholder="Mac Address" ng-model="product.name" focus ng-pattern="/[a-f0-9]{4}\.[a-f0-9]{4}\.[a-f0-9]{4}/" required/>
Plunker for the example: http://plnkr.co/edit/gazY4z9PJbbtINQC7ziu?p=preview
Related
can we have two forms with the same form name on the same page ?
will angular validation work properly for each form ?
For example
<form name="ajax">
<input type="text" name="fname" />
</form>
<form name="ajax">
<input type="text" name="fname" />
</form>
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
Expected: After Entering Valid Email ID pattern button should be enabled.
Happened: After Entering Valid Email ID button goes disabled.
This is my Input textfield in HTML:
<form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>
This is my AngularjS Script :`
var myApp1=angular.module('myApp',[]);
myApp1.controller('myController',['$scope',function($scope)
{
$scope.submit=function(c)
{
}
}]);
First add a name to your form and to your input:
<form name="myForm" class="form-inline">
<input type="email" name="emailID" class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">
Then change your ng-disabled:
<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>
$dirty is added because we want the user to actually enter an value before we enable. Or you can add required on your input if its a compulsory input field.
Also refer: http://www.w3schools.com/angular/angular_validation.asp
I have the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>
Why isn't the error variable being set here? Shouldn't user.username.$error.minlength be true when no value is in the input?
<form name="user" ng-submit="submit()">
<div class="input-wrapper">
<input placeholder="Username" ng-model="user.username" ng-minlength="2" ng-maxlength="12" />
<div ng-show="user.username.$error.minlength">Min length!</div>
</div>
<div class="input-wrapper">
<input placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" />
<div ng-show="loginForm.password.$error.minlength">Min length!</div>
</div>
</form>
if you need to show the message when there is no value for the password you need to check the required property.
put a name for the form
<form name="formName" ng-submit="submit()">
put a name to password input. and the required attribute
<input name="password" placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" required />
change the ng-show as,
<div ng-show="formName.password.$error.required || formName.password.$error.minlength">Min length!</div>
formName.password.$error.required will handle the status of empty input.
here is a plunker demo
The angular email validation is not working for me, that I'm not allowed to type any text in the email text box.
Following is my HTML:
<form name="locationSettingsForm" ng-submit="vm.saveLocationSettings()" class="form">
<input class="userInput" style="width:40%" type="email" name="email"
maxlength="50" data-ng-model="vm.location.email" required
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<label class="validationErrorText" data-ng-show="locationSettingsForm.email.$dirty && locationSettingsForm.email.$error.email">Email is invalid</label>
<label class="validationErrorText" data-ng-show="locationSettingsForm.email.$dirty && locationSettingsForm.email.$error.required">Email is required</label>
</form>
Initially I tried without the ng-patter. I only used type='email', but in both instances it didnt work. I can't type any text.
try this pattern
ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/"
it should work
Hi try below code....
<input type="email" id="inputEmail" ng-model="email" name="uEmail" placeholder="Email Id" required>
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>