CODEWITHSUNDEEP
angularjs
verystrongjoe
verystrongjoe

Reputation: 3911

What if I want to validate the input value when I move using tab key?

If you try running this source and move to the next tab using Tab Key, It doesn't display required validation message. How can I validate including this case??

Code for validation is like the followings.

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

Upvotes: 1

Views: 1443

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

ng-model-options of Angular 1.3+, which will update ng-model on blur that will get dirty on blur

 <input type="text" name="user"
         ng-model="user"
         ng-model-options="{ updateOn: 'blur' }"

Upvotes: 1

23tux
23tux

Reputation: 14736

Have a look at the $pristine and $touched states of your form. You could do something like this:

<span style="color:red" ng-show="myForm.user.$touched || (myForm.user.$dirty && myForm.user.$invalid)">

Here is the updated plnkr: http://plnkr.co/edit/wTSKGJ0FUx3TVCMYA7R9?p=preview

See also this question: Angular - difference between pristine/dirty and touched/untouched

Upvotes: 0

Related Questions