Responsive Form Validation with AngularJS and HTML5

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

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.

View this on JSFiddle

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.

Create an Easy AngularJS Menu

This entry is part 4 of 9 in the series: AngularJS Learning Series
Social Share Toolbar

My goal for this AngularJS experiment was to create a multi-level menu with a hide-away submenu, fed from an external data source. The sub-menu should appear when its parent is clicked. As with my other AngularJS examples, this turned out to be a very simple task involving minimal code.

View this on JSFiddle

One directive in the example that I hadn’t used before was ngStyle which facilitates dynamic style assignment. I use it here to position the submenu under the appropriate parent item. The directive is assigned to the ul block, and when the parent item is clicked, a function is called that modifies the scoped ‘subLeft’ property, something like this:

<ul>
   <li ng-click="setStyle()">menu item</li>
</ul>
<ul ng-style="subLeft">
   <li>submenu item</li>
</ul>
$scope.setStyle = function() {
   $scope.subLeft = {'padding-left':'80px'};
}

One hurdle I had to overcome was that ng-click only takes an Angular expression, which does not use JavaScript eval() to evaluate. I wanted to send the id of the element that was clicked so I could derive its coordinates as a way of knowing where to place the submenu. Without the use of JavaScript I was unable to do that.

In the interest of keeping the example simple, I ended up sending the Angular iterator index instead of the element id. Since all of my menu items are the same width it was a matter of multiplying the index by that width to arrive at the correct positioning. Problem solved!