Angular JS - Display validation errors when textfield lose focus

Question

I want to perform validation on input field , when user lefts the field .

My.html

   <div ng-form="form"  novalidate>
       <input type="email" name="userEmail" class="form-control username" 
ng-model="login.username" placeholder="Email" required />
     <input type="password" name="password" class="form-control password" placeholder="Password" ng-model="login.password" required />
   <div class="invalid-message" ng-show="form.userEmail.$dirty && form.userEmail.$invalid">
    <span class="invalid-mail" ng-show="form.userEmail.$error.required">Invalid:Tell us
                            your email.</span> 
<span class="invalid-mail" ng-show="form.userEmail.$error.email">Invalid:This is not a valid email.</span>
     </div>
  </div>

I want to display invalid-message div and span , corresponding to error in email field . Now the code works fine .

But my requirement is to show invalid-message div and span when user finished typing in email.How to perform this your comments are welcome

Please find the fiddle here Validation Demo fiddle

possible duplicate of [AngularJS Forms - Validate Fields After User Has Left Field](http://stackoverflow.com/questions/15798594/angularjs-forms-validate-fields-after-user-has-left-field) — Alexandros B, Jan 22 '14 at 11:32
@Circadian , I am displaying a div for validation message , but that question adds a directive to check has-visited . But that's not fit into my requirement. — Vinodh, Jan 22 '14 at 12:39

score 14 · Accepted Answer · answered Jan 22 '14 at 11:35

You can accomplish this by setting a temporary variable that indicates whether the user has left the field. Best place to do this is in the ng-blur directive (so, you can keep all of this on the view).

Here is an updated fiddle.

<form name="form"  novalidate>
    <input type="email" ng-blur="visitedEmail = true" name="userEmail" class="form-control username" ng-model="username" placeholder="Email" required />
    <input type="password" ng-blur="visitedPassword = true" name="password" class="form-control password" placeholder="Password" ng-model="password" required />
    <div ng-show="form.userEmail.$dirty && form.userEmail.$invalid && visitedEmail">
       <span ng-show="form.userEmail.$error.required">Invalid:Tell us  your email.</span> 
    <span  ng-show="form.userEmail.$error.email">Invalid:This is not a valid email.</span>
    </div>
</form>

You can see the introduction of EmailVisited that is set on ng-blur.

score 2 · Answer 2 · answered Feb 14 '17 at 18:23

2

try using form.userEmail.$touched

answered Feb 14 '17 at 18:23

Robert Ravikumar

912
2
11
29

Angular JS - Display validation errors when textfield lose focus

2 Answers2