How to handle email input validation in AngularJS with Twitter Bootstrap styling?

Question

Live Demo

Consider an email input:

<input type="email" ng-model="client.email">

If one types a@b in it, client.email stays undefined , but the input is not considered :invalid .

If one uses Bootstrap to style the inputs, this causes the input to have a normal blue outline, rather than the red one, which suggests that the input has a valid email.

This is quite confusing because users think they entered a valid email address, but the underlying model in AngularJS is not set.

Any recommendations how to handle this?

Answer 1

I think your use of Bootstrap is what confused you. If you add the styles yourself for ng-invalid / ng-valid classes, you will see that it's an error.

For instance, the second example at http://docs.angularjs.org/guide/forms demonstrates how you can add custom classes for invalid/valid types, and show that a@b is indeed an invalid value.