Validation in AngularJS:

We created an HTML form in the previous section. Here, we will implement client side validation in AngularJS form.

AngularJS includes the following validation directives.

Directive	Description
ng-required	Sets required attribute on an input field.
ng-minlength	Sets minlength attribute on an input field.
ng-maxlength	Sets maxlength attribute on an input field. Setting the attribute to a negative or non-numeric value, allows view values of any length.
ng-pattern	Sets pattern validation error key if the ngModel value does not match the specified RegEx expression.

Let's implement validation in the student form which contains First Name, Last Name and Email fields.

Example: Form Validation

        
<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app >
    <form name="studentForm" novalidate>
        <label for="firstName">First Name: </label> <br />
            <input type="text" name="firstName" ng-model="student.firstName" ng-required="true" /> 
            <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span><br /><br />
            <label for="lastName">Last Name</label><br />
            <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="student.lastName" /> 
            <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
            <span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
            <label for="dob">Email</label><br />
            <input type="email" id="email" ng-model="student.email" name="email" /> 
            <span ng-show="studentForm.email.$touched && studentForm.email.$error.email">Please enter valid email id.</span><br /><br />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

Try it

Let's understand the above example step by step:

Apply novalidate attribute in <form> tag. The novalidate attribute will disable the browser's default validation.
Set the name attribute in <form> and other elements, which will be used to obtain a reference of the elements.
Now, set ng-required="true" on the input element of First Name. Also, set name attribute to the name of model property, "firstName" in this case.
Create <span> element to specify an error message with every input filed where the validation directive is applied.
Set ng-show directives to <span> element to an expression "studentForm.firstName.$touched && studentForm.firstName.$error.required". This expression will return true if a user tabbed out without entering FirstName.
The same way set ng-minlength & ng-maxlength directives to last name. Also, set ng-show directive to "studentForm.lastName.$touched && studentForm.lastName.$error.minlength" expression to <span> element adjacent to LastName input field.
Create another <span> for maxlength validation message.
Email will be validated automatically with input type=email. Also, create <span> for email validation message.

We have applied an expression "studentForm.firstName.$touched && studentForm.firstName.$error.required" to the <span>, in the above example. $touched & $error are built-in properties which return the state of the specified input controls and form. Let's learn about the state properties.

State Properties:

Angular includes properties which return the state of form and input controls. The state of the form and control changes based on the user's interaction and validation errors. These built-in properties can be accessed using form name or input control name. To check the form status use formName.propertyName, and to check the state of input control, use formName.inputFieldName.propertyName.

The following table lists the state properties.

Property	Description
$error	$error object contains all the validation attributes applied to the specified element.
$pristine	Returns true if the user has not interacted with control yet else returns false.
$valid	Returns true if the model is valid
$invalid	Returns true if the model is invalid
$dirty	Returns true if user changed the value of model at least once
$touched	Returns true if the user has tabbed out from the control.
$untouched	Returns true if the user has not tabbed out from the control.

The following example demonstrates the state properties.

Example: State Properties


<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
     <form name="studentForm" novalidate>
        <p>
            First Name Status: <br />
            Pristine: {{studentForm.firstName.$pristine}} <br />
            Touched: {{studentForm.firstName.$touched}}<br />
            Untouched: {{studentForm.firstName.$untouched}}<br />
            Valid: {{studentForm.firstName.$valid}} <br />
            Invalid: {{studentForm.firstName.$invalid}} <br />
            Dirty: {{studentForm.firstName.$dirty}} <br />
            Error: {{studentForm.firstName.$error}} <br />
        
        </p>
            <label for="firstName">First Name: </label> <br />
            <input type="text" name="firstName" ng-model="student.firstName" ng-required="true" />
            <span ng-show="studentForm.firstName.$touched && studentForm.firstName.$error.required">First name is required.</span><br /><br />
            <label for="lastName">Last Name</label><br />
            <input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="student.lastName" /> <br />
            <span ng-show="studentForm.lastName.$error.minlength">min 3 chars.</span>
            <span ng-show="studentForm.lastName.$error.maxlength">Max 10 chars.</span> <br />
        
        <input type="submit" value="Save" />
    </form>   
</body>
</html>

Try it

Learn about built-in validation css classes in AngularJS in the next section.