CODEWITHSUNDEEP
javascripthtmlangularjs
Vinodh
Vinodh

Reputation: 5268

Angular JS - Display validation errors when textfield lose focus

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

Upvotes: 2

Views: 14229

Answers (2)

Robert Ravikumar
Robert Ravikumar

Reputation: 922

try using form.userEmail.$touched

Upvotes: 2

Davin Tryon
Davin Tryon

Reputation: 67296

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.

Upvotes: 14

Related Questions