TL;DR I wrote my own directive! Big whoop, right? If you want a new way to show validation errors, check it out on GitHub.

Since starting with AngularJS, I've really struggled with validation. Most typical examples of validation on forms throw errors in the user's face from the get go. There are all kinds of work arounds for these issues that others have used to great effect. At one point, I even wrote my own custom directive for validating only after a blur event. Ari Lerner has a really nice directive for only showing errors when the user is not focused on a field. However, none of the workarounds really worked for me. To each his own, right?

I whined about my problems to Sharon DiOrio during breakfast one day at #ng-conf. Little did I know that she was actually presenting later! How embarassing. During my diatribe, Sharon suggested I address my concerns to the Angular team. I didn't feel qualified to do so. Yes, there are lots of questions on Stack Overflow and other forums about validation issues, but ... I wasn't going to stick my head out any further.

After becoming so frustrated with the UX issues, I gave up and rewrote AngularJS validation from scratch while at #ng-conf. It worked - barely. It was a nightmare to code. It was a nightmare to configure. The AngularJS team did a much better job than I thought or could ever replicate.

Then, a light bulb came on. My main goal with validation was not to let the user see it until it was necessary. Ari's "ngFocus" sort of did this. Validating after blur sort of did it as well. However, they didn't do it the way I wanted it. So, I wrote my own.

If a user is actively typing in a field, they won't see errors. If they pause in typing and the field is not valid, the errors will show. If a field gets focus but no input after a while, validation errors will show. If a field loses focus, errors will show after a configurable time limit.

In the end, I'm pretty happy with my own workaround. It does what I want and is pretty easy to use. The lesson of this story is simply to use the tools Angular gives us to make it our own.

You can check it out on GitHub.