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

Question

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>

fire validation msg in ng-blur.. – Ved Apr 21 '15 at 08:17 — Ved, Apr 21 '15 at 08:17

score 1 · Answer 1 · answered Apr 21 '15 at 08:54

1

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' }"

answered Apr 21 '15 at 08:54

Pankaj Parkar

134,766
23
234
299

@verystrongjoe does it helped you? – Pankaj Parkar Jul 19 '15 at 14:15

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

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

edited May 23 '17 at 12:22

Community

1
1

answered Apr 21 '15 at 08:17

23tux

14,104
15
88
187

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

2 Answers2