Validate fields after user has left a field

forms angularjs
mcranston18 picture mcranston18 · Apr 3, 2013 · Viewed 131.1k times · Source

With AngularJS, I can use ng-pristine or ng-dirty to detect if the user has entered the field. However, I want to do client-side validation only after the user has left the field area. This is because when a user enters a field like e-mail or phone, they will always get an error thrown until they've completed typing out their full e-mail, and this is not an optimal user experience.

Example

UPDATE:

Angular now ships with a custom blur event: https://docs.angularjs.org/api/ng/directive/ngBlur

Answer

user1506145 picture user1506145 · Oct 6, 2014

From version 1.3.0 this can easily be done with $touched, which is true after the user has left the field.

<p ng-show="form.field.$touched && form.field.$invalid">Error</p>

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Related questions

Disable submit button when form invalid with AngularJS

I have my form like this: <form name="myForm"> <input name="myText" type="text" ng-model="mytext" required /> <button disabled="{{ myForm.$invalid }}">Save</button> </form> As you may see, the button …

Read More
How can I conditionally require form inputs with AngularJS?

Suppose we're building an address book application (contrived example) with AngularJS. We have a form for contacts that has inputs for email and phone number, and we want to require one or the other, but not both: We only want …

Read More
AngularJS does not send hidden field value

For a specific use case I have to submit a single form the "old way". Means, I use a form with action="". The response is streamed, so I am not reloading the page. I am completely aware that a typical …

Read More