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 — Alexandros B
– Alexandros B, Commented Jan 22, 2014 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
– Vinodh, Commented Jan 22, 2014 at 12:39

Davin Tryon · Accepted Answer · 2014-01-22 11:35:57Z

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.

Robert Ravikumar · Accepted Answer · 2017-02-14 18:23:06Z

2

try using form.userEmail.$touched

answered Feb 14, 2017 at 18:23

Robert Ravikumar

9422 gold badges11 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular JS - Display validation errors when textfield lose focus

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related