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>
Related
I try to set an input as required if another input has changed. My need is to require confirm password if password has changed.
I use this on the input of confirm password but it is never required :
ng-required="userForm.Password.$touched"
CodePen
Another question : Is there a way to remove ng-Model="user.ConfirmPassword"? because ConfirmPassword is not necessary on my model "user", isn't it?
You should use the name property instead of id.
Also, this is no valid syntax:
<span class="error" ng-show="userForm.Password.$touched userForm.Password.$error.required">Password is required</span>
It should be:
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
Then it will work just fine, as long as Password is the name of the input element, not the ID.
You are not using name property, so you can't use form properties for Password and ConfirmPassword...
Also change AND to OR..
here is updated code
<form name="userForm" ng-controller="userController">
<label for="Password">Set a password:</label>
<input type="password" name="Password" id="Password" ng-model="user.Password" required />
<span class="error" ng-show="userForm.Password.$touched">Password is required</span>
<br />
<label for="ConfirmPassword">Confirm the password:</label>
<input name="ConfirmPassword" type="password" id="ConfirmPassword" ng-model="user.ConfirmPassword" ng-required="userForm.Password.$touched" />
<span class="error" ng-show="userForm.Password.$touched || userForm.ConfirmPassword.$touched || userForm.ConfirmPassword.$error.required">Confirm password is required</span>
<br/>
<span>Password: {{user.Password}}</span>
<br/>
<span>Conform Password: {{user.ConfirmPassword}}</span>
</form>
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>
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
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
I'm using angularJs validation in my html form. I'm using the required validation on an input, and when I erase the value there the textbox gets highlighed in red and trying to submit the pops-out the error 'Please fill out this field' But my custom error message is not displayed. Following is the code.
<form id="settingsForm" ng-submit="vm.saveSettings()" class="form">
<td style="width:30%">
<input class="userInput" name="locationName" style="width:80%" type="text" maxlength="50" data-ng-model="vm.location.locationName" required />
<label class="validationErrorText" data-ng-show="locationSettingsForm.locationName.$error.required">Location Name Required</label>
</td>
</form>
Any idea why this happens? Attached is a screenshot of how its displayed when the field is not filled.
I have created a plunker which will help you.
http://plnkr.co/edit/GVAdjcjcYczmcmzoCqoF
<form role="form" name="signUpForm" class="form-horizontal">
<div class="form-group">
<label for="url" class="col-sm-4 control-label">URL</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="url" id="url" placeholder="Enter last name"
ng-model="user.lastName" required="true" ng-pattern="/(https?:\/\/)(www)?[A-Za-z0-9.\-#_~]+\.[A-Za-z]{2,}(:[0-9]{2,5})?(\/[A-Za-z0-9\/_\-.~?&=]*)*/">
<span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.required">
<small class="text-danger">Please enter valid URL.</small>
</span>
<span ng-show="signUpForm.url.$dirty && signUpForm.url.$error.pattern">
<small class="text-danger">URL should have 2 to 25 characters.</small>
</span>
</div>
</div>
</form>
You can use similar validation. The name attribute should match with the condition. Here it is url.
Add
name="locationSettingsForm"
to the <form> element