The live feedback is often forgotten when working with form validation. Therefore, I have made a simple web application that will present live validation feedback as the user input email & password in order to create a new account. The technologies used for this example is Bootstrap in order to create a nice looking view, and AngularJS in order to present live data & for some validation help.

The end result will look something like this:

First we need to create a HTML page containing the input form needed.

The HTML page will contain the AngularJS bindings in order to present live updates but also to check validation variables in order to present the correct color.

In this example we are making use of AngularJS to do some of the validations for us:

loginForm.email.$error.required

Which will make sure that the field 'email' contains a value

loginForm.email.$error.email

Which is used to validate the field as an email address.

loginForm.email.$dirty

Which will make sure that the data has changed (meaning no initial values).

loginForm.email.$invalid / loginForm.email.$valid

Which determines whether the control is in a valid state.

What also should be noted is that ng-disabled is used in order to only activate the submit button when all of the fields are valid.