Responsive Form Validation with AngularJS and HTML5

This entry is part 6 of 9 in the series: AngularJS Learning Series

This AngularJS example demonstrates how HTML5 and AngularJS can work together to provide a modern approach to form submission and validation without lengthy JavaScript validation algorithms, cumbersome CSS, or page refreshes.

Note that there are multiple ways to present and submit a form using HTML5 and AngularJS. Your implementation should depend on the needs of your application. The method I use here does not perform an actual submit. Instead, when the Submit button is clicked it calls a function that updates a visitorInfo object. Any action can be performed when the visitorInfo object is updated by modifying the update function in VisitorFormController in app.js.

The example provides immediate feedback based on the data entered into the input fields. Every input field has been flagged as “required” and you can watch the debugging info to see the status change dynamically as each input field is populated.

[iajsfiddle fiddle=”CUzbs” height=”400px” width=”100%” show=”result,html,js,css,resources” skin=”default”]

Let’s take a closer look at the email section to see how this is done:

<span class="label">Email:</span>
<input type="email" name="email" placeholder="Email" required="" />
<span class="valid">?</span>

The first line is simply the label that is show before the input field. The “label” class lets me apply some styling to keep it on the same line as the input field, make it bold, etc. No magic there.

The input field has several attributes. Name gives us a means of referring to that specific field. Type defaults to “text” but we’ve given it the HTML5 type of “email”. Doing so implements validation rules, such as requiring an & and a domain type (like .COM). It also causes responsive mobile devices to present different UI. For example, assigning a type of email will cause “.COM” to appear on keyboards of many mobile devices.

The ngModel directive links the input field to a scope property, in this case visitorInfo.email. visitorInfo is an object that holds all of the form properties. Notice that each input field model includes visitorInfo before the property name. You can watch visitorInfo populate in the debugging info as you fill in the form.

Placeholder is a new input attribute that allows you to define a short data entry hint that will appear inside the input field. The hint disappears when the user starts entering text but will reappear if the text is deleted. Placeholder text does not get submitted as form data.

Finally, there is the required attribute that defines the field as one that must be filled in for the form to be considered valid.

The span below the input field contains a checkmark that is not visible when the page first loads. The AngularJS ngShow directive has an evaluation in it that will only allow the span to be visible when the field passes email field passes validation rules.

Negative feedback is provided courtesy of CSS and AngularJS. Enter a value in the First Name field and then delete it. The field background will change to red. If you look in style.css you’ll see the following section:

input.ng-invalid.ng-dirty {
	background-color:red;
}

ng-invalid and ng-dirty automatically get assigned as classes based on the input field state. If the field contents are invalid then the input field will be dynamically assigned the ng-invalid class. We can use that class to style the field in certain circumstances as I did above. Pretty slick! See the AngularJS API for more information on these class assignments.

Finally, check out the Submit and Restore buttons. The Submit button’s job is to update the visitorInfo object. The restore button restores all of the field data to the last submitted value.

Both buttons react to the state of the form. The submit button will enable and turn green when the entire form has been filled out with valid information. The restore button enables when the form data differs from the stored visitorInfo object data.

This functionality is done using a combination of AngularJS’s ngClick and ngDisabled directives:

<button ng-click="reset()" ng-disabled="isUnchanged(visitorInfo)">RESTORE</button>
<button class="submitbtn" ng-click="update(visitorInfo)" ng-disabled="valForm.$invalid || isUnchanged(visitorInfo)">SUBMIT</button>

ngDisabled contains an evaluation. If the evaluation is true then ngDisabled will also be set to true, making the buttons un-clickable. If they evaluate to false then the buttons will become enabled. Once they are enable, they can be clicked and the clicks will be handled by the functions that are referenced in the ngClick directives.

All in all it was very easy. The code itself is MUCH shorter than this post, which is a testament to the simplicity of AngularJS and HTML5 (or it could be just an indication that I’m too wordy.) In either case, I’m using that line as an opportunity to wrap this post up.

As always, check out the code on Plunkr. Fork it, edit it, experiment with it. It’s the best way to learn.

Series Navigation<< Angular Intro to Modules, Services, Factories, and FilteringAngular and XML? No Problem! >>