Hello friends, This tutorial is on simple implementation for client side Validation in AngularJS. the basics of AngularJS and simple calculator demo program is explained in post A Step-by-Step Tutorial for Your First AngularJS App | Simple Interest Calculator.

AngularJS provides client-side form validation. In client-side validation, Input data errors detected on the client when the form is being submitted to the server. If any of the form control are found to be in error state i.e invalid state , the submission of the form to the server will be  canceled and the error message will be displayed. This permits the user to correct the input data before submitting the form to the server. as soon as the field containing the invalid data loses focus, we can provide custom error messages. It provide the user with a rich, interactive validation experience.

AngularJS provides the facility to get the current state of form and input fields input, text-area, select controls which makes developer notify the user about the current state. following are the list of input states.

• $untouched: The specified field has not been touched yet.
• $touched: The specified field has been touched.
• $pristine: The specified field has not been modified yet.
• $dirty: The specified field has been modified.
• $invalid: The specified field content is not valid.
• $valid: The specified field content is valid.

Input Forms groups the html controls and it has the following states, which are either true or false.

• $pristine: True if user has not interacted with the form yet means No fields or controls of the form has been modified yet.
• $dirty: True if user has already interacted with the form  that is One or more controls of the form has been modified.
• $invalid: True if at least one control of the form is invalid
• $valid: True if all of the fields or controls of the forms are valid.
• $submitted: True if user has submitted the form even if its invalid.

In AngularJS , it easy to handle client-side form validations without much effort. following are some of the basic validation options available to an input field.

Required : AngularJS provides a ng-required

Minimum length :  This will make sure that the length of the entered value not less than the value set using ng-minlength directive.

Maximum Length : This will make sure that the length of the entered value is not more than the value set using ng-max length directive.

Email : We can set the input type to email to ensure that the input field is a valid email id.

URL: We can set the input type to url to ensure that the input field is a url.

input type="url" name="homepage" ng-model=user.url />

AngularJS provides specific classes to the form based upon their state. It allow us for styling of form as well as controls, ngModel adds these CSS classes as ng-valid, ng-invalid, ng-pristine, ng-dirty, ng-touched, ng-untouched, ng-pending.

Let’s see example for validating student registration form. the basic fields are Student-name, student-email. here set validating rule for student name field as required and valid email address.

Here you can download code angularjs-simple-validatio-demo.html (4 downloads) . This file containing html, javascript, css code. It show error message when control lost focus. Initially submit button is disabled, it will get enable once field input data is valid. screen-shot1 shows invalid state of form controls. so form can not be submitted.

screen-shot 1

screen-shot2 shows the valid state of form controls, so it can be submitted. here submitted data is collected in JSON array.  JSON array represents ordered list of values.  This  array can store data in name value pair format. It can store string, number, boolean or object in JSON array. In JSON array, values must be separated by comma.

screen-shot 2

Thanks !

You can ask queries on mail : [email protected]

A Step-by-Step Tutorial for Your First AngularJS App | Simple Interest Calculator.