I'm trying to get the form validation on -URL REMOVED- to trigger when I submit and it's not. I believe I have things setup correctly but am clearly missing something.
Looks like angularjs requires a model bound on an input to use the validation.
See http://jsfiddle.net/adamdbradley/Qdk5M/
Try removing ng-model="email", run, and you'll notice the validation no longer works.
<input type="email" id="inputEmail" placeholder="Email" ng-model="email" required>
vs
<input type="email" id="inputEmail" placeholder="Email" required>
Related
I must validate a field when I leave another field...
I let you see my code:
<input data-ng-model="invitation.Email" name="email" type="email" data-ng-required="true"
data-ng-model-options="{ updateOn: 'mousedown blur' }" />
<input data-ng-model="invitation.EmailConfirmation" name="email_confirmation" type="email"
data-ng-required="true" data-match="invitation.Email" data-ng-model-options="{ updateOn: 'mousedown blur' }" />
<span data-ng-show="presenta_amico_form.email_confirmation.$error.mismatch" class="error">Email mismatch</span>
So, for example... I write my Email, and that's Ok... then I write my ConfirmationEmail but the error "Email mismatch" appear because I see that I was wrong in typing the Email field. So I correct the Email field but the error does not disappear because I have to focus and blur the EmailConfirmation field.
I do not like this and I would like that the ConfirmationEmail is validated also when the Email field lose focus.
How can I do?
Thank you
You could add an ngBlur handler to the second field and manually apply the validation e.g.
<input data-ng-model="invitation.Email" name="email" type="email" data-ng-required="true"
data-ng-model-options="{ updateOn: 'mousedown blur' }" ng-blur="checkMatch()" />
Sometimes forms become very complicated and it is impossible to test every case manually after code changes.
I already have unit testing with karma on the project.
Is there any tools or best practices how to test AngularJS form validation with jasmine and karma?
For example how can I test such form with jasmine and karma automatically?
<form name="appForm" novalidate>
<div>
Username: <input type="text" ng-model="data.username" name="username" ng-maxlength="15" required />
</div>
<div>
Email: <input type="email" ng-model="data.email" name="email" required />
</div>
<div>
Age: <input type="number" ng-model="data.age" name="age" />
</div>
<div>
<button ng-click="submit()" ng-disabled="appForm.$invalid">Submit</button>
</div>
</form>
It depends on what you actually want to make sure when testing form validation.
If you want to be sure invalid form will not be submited, then it is one case. And I don't see problems with this case.
If you want to be sure that appropriate messages are displayed for invalid fields, then, for example, you can make a directive, that is aware of all your possible field restrictions ('required', 'ng-maxlength', 'url', etc.) and is responsible for displaying appropriate error messages. So you will need to create tests only for this directive.
Example:
<input type="text" ng-model="data.username" my-directive name="username" ng-maxlength="15" required />
myDirective is aware of required and ng-maxlength restrictions, that were put on the field, & it is responsible for displaying appropriate error messages for invalid state of the field.
Suppose I have the following setup:
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
In AngularJS, is there any way for me to determine when, say, the user deselects #text1, for example by clicking #text2, or clicking somewhere else on the screen? I am aware the ng-change lets me listen to changes in the value of #text1 itself, but I see no way to determine when the user actually leaves the field.
You can use ngBlur for this
https://docs.angularjs.org/api/ng/directive/ngBlur
<form>
<input type="text" id="text1" ng-blur="iHaveLostFocusDoSomethingWithIt()">
<input type="text" id="text2">
</form>
Sample email: some#mail
In Angular v1.1.x this email is not valid. But in Angular v1.3.x it's valid. I know technically it's valid but I need like some#valid.com email. I tried some regex but not worked.
How can I change validation in Angular v1.3.x ?
Try to use ng-pattern in your email input.
<input type="email" name="input" ng-model="text" ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/" required>
See an example: plunk
Now this got even better, Angular 4 has email validator built-in, there is no boilerplate code needed :)
https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6
https://github.com/angular/angular/pull/13709
Just add email to the tag. For example
<form #f="ngForm">
<input type="email" ngModel name="email" required email>
<button [disabled]="!f.valid">Submit</button>
<p>Form State: {{f.valid?'VALID':'INVALID'}}</p>
</form>
I'm using AngularJS and have a form where I want the Submit button to be disabled if some fields are not filled in.
The standard way seems to be the following:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" ng-model="form.name" required>
<input type="submit" ng-disabled="myForm.name.$invalid">
</form>
http://jsfiddle.net/YMSRU/
However, if I omit the model from the input field the validation doesn't work and I don't need any models on my input fields (I submit my form using the ngUpload directive so it's actually sent to the form action in an iframe).
Is there any solution or should I add random models just to make the validation work? It seems like a bad work-around.
You could simply do the invalid check at the form level, then no need to define a model for each input:
<form ng-app name="myForm">
<label>Name</label>
<input type="text" name="name" required>
<input type="submit" ng-disabled="myForm.$invalid">
</form>
You are missing your model at your test input tag : ng-model="form.name"