[AngularJS Tutorial] AngularJS Form Validation Example

This tutorial introduce you how to create AngularJS Form Validation Example. AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea, select), and lets us notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not.
If you are just familiar to AngularJS you should refer to the tutorial Angularjs Tutorial Step by Step in 30 minutes to get the AngularJS knowledge basic.

Table of contents:
1. Create the simple form
2. Form with Error Handling
3. Form states in AngularJS
4. Highlight fields on validation success/failure with CSS

The form that we are creating in this AngularJS Form Validation Example like below:

AngularJS Form Validation Example
To create this form we will use Bootstrap for creating HTML document and powerful validation feature of AngularJS for taking input data, validating it and processing it. Now, It’s time for us to create AngularJS Form Validation Example step by step.

Create the simple form
First step, we create a form with simple HTML document and without any validation or styling. In this form, we also declare AngularJS application, controller and scope variable. Our HTML document looks like this below.

Live demo

Form with Error Handling
We are continue to customize the above form by putting AngularJS validation configuration. We will use name attribute on a form field to fetch errors for individual field. Before studying AngularJS validation we want to show you the form that contains already validation configuration like this:

Let’s dig deepr:

As you see on the above code snippet, the sex field has no name attribute because we don’t want it is validated. And the fields with HTML5 required validator as well as AngularJS ng-minlength and type=”email” validators. Each of the validators throws the $error object.

ng-show directive is used to check and show validation errors.
myForm.$dirty condition will be true if you typed in or edited in the form field.
myForm.[formfield].$touched will be true if you touch in the form field.
myForm.[formfield].$invalid will be true if AngualrJS find that field with validation error.
ng-disabled directive is used to disable the submit button. Notices that if there is any validation error in form, the form is invalid by AngularJS.

Form states in AngularJS

$invalid : AngularJS sets this state when any of the validations of the fields in the form as invalid.
$valid : all the validations in the form are currently evaluating to correct.
$pristine : no fields have been modified yet.
$dirty : one or more have been modified.
$error : object hash that contains references to controls or forms with failing validators

Live demo

Highlight fields on validation success/failure with CSS
AngularJS will add or remove appropriate CSS classes that matches validation errors to/from individual fields and form. It is a advantage for us to highlight the error fields. And simply we must only custom styles for these classes. Here is our styles:

Notices: the above css is packaged into a file named mystyle.css and it is included in header of our HTML document.

Live demo

That’s all about the tutorial AngularJS Form Validation Example. Hope that you can create your own form validation.

Download complete source code by hitting the below link

angularjs-form-validation.zip (393 downloads)

Leave a Comment


Please share it if you found this useful
Hide Buttons