Shameless Plug : Kids In Touch - Training Wheels for Texting
*UPDATE: * You might want to completely ignore this now. AngularJS has improved handling for validation now. Read about it here.
I've struggled with validation in AngularJS many times. I just really have a hard time with it. Most validation examples on the web have major UX problems. In many of them, the user is bombarded with errors even before they've touched the form. I've tried some solutions offered by others and some I've custom developed.
Overall, my favorite solutions have had to do with only validating after a field has been blurred. However, that is really not the best way to approach the problem. You basically have to remove Angular's built-in keydown and change bindings.
Today, I came across Ari Lerner's solution using a custom directive 'ngFocus'. I liked this a lot. It's is effective validate on blur without acutally screwing with Angular's built-in validation.
ngFocus works by only displaying validation errors if the field no longer has focus. So, a user starts to enter a value. No error shows. If the value is not valid, the error only shows up when the user changes focus.
Here's a sample of that using the Ionic Framework :
That all looks pretty good. However, there is an issue that bothers me. When the user goes back to fix the error, the validation disappears. So, the only way they can tell if the problem is resolved is to click somewhere else.
To fix that, I've taken Ari's code and modified it slightly. I've introduced an attribute called has-blurred. When has-blurred is included with ng-focus, the error will only show up as usual after the field has lost focus. However, when the field gets focus again, it will continue to show validation errors until they are fixed. Now, the user will be able to tell when they have solved the validation problem without having to tap somewhere else on the screen.
Here's a sample using has-blurred.
