AngularJS Form Validations with Examples

Here we will learn what is form in angularjs?, form and input field controls validations in angularjs, different validation properties of form and input fields in angularjs and different validation classes of form and input field controls in angularjs with examples.

AngularJS Form Validations

A form is a collection of controls like input textbox, number text, email text and checkbox etc. In angularjs we can validate form and input field controls (text, select, textarea) in client side and notify users for invalid data while submitting forms with better user experience when compared to server side validations.

 

In angularjs we can validate form input field controls by using HTML5 property required or angularjs property ng-required.

What is required or ng-required ? How to use it?

Generally by using html5 required and angularjs ng-required attributes we can perform required field validation in form.  Both required and ng-required will do the same validation so we can use either of them based on our interest.

 

Following is the way of defining required and ng-required properties in angularjs applications.

 

                 1. <input required>

 

                 2. <input ng-required="true"> are essentially the same thing.

 

We can use both of them as per our preference but as per angularjs its preferred use ng-required attribute.

Syntax of AngularJS Form Validation with Input Fields

Following is the syntax of implementing validations to input fields on form in angularjs applications.

 

<form name="personForm">

<input type="text" name="firstname" ng-model="person.fname" required />

<span ng-show="personForm.firstname.$error.required">Required!</span>

</form>

If you observe the above syntax we defined required to input control and showing span element based on validation of input control.

 

Now we will see how to implement form validations with input field controls in angularjs application.

AngularJS Form Validations Example

Following is the simple angularjs example to validate input field controls in form.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Validate Controls in Form

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('formApp', []);

app.controller('formCtrl', function ($scope) {

$scope.sendForm = function () {

$scope.msg = "Form Validated";

};

});

</script>

</head>

<body>

<div ng-app="formApp" ng-controller="formCtrl">

<form name="personForm" ng-submit="sendForm()">

First Name:<input type="text" name="firstname" ng-model="person.fname" required />

<span ng-show="personForm.firstname.$error.required"> Required! </span> <br /><br />

Last Name:<input type="text" name="lastname" ng-model="person.lname" required />

<span ng-show="personForm.lastname.$error.required"> Required! </span> <br /><br />

<button type="submit">Submit Form</button><br /><br />

<span>{{msg}}</span>

</form>

</div>

</body>

</html>

If you observe above example we defined property “required” to textbox controls and showing error messages in case if those controls are empty. Now we will run and see the output of example.

Output of AngularJS Form Validation Example

Following is the result of form validation using in angularjs applications

 

Angularjs form validations with input field controls example output or result

AngularJS Form and Input Field Validation States

In angularjs we have different properties available for form and input fields that help us to validate form controls.

 

Following are the different properties available for form validation in angularjs and all these properties will return either true or false based on status.

 

PropertyDescription
$pristine This property will help us to know whether form elements has been modified or not. It will return true if no form elements has been modified yet
$dirty It returns true if any form elements modified
$invalid It tells whether form element invalid or not based on rules
$valid It tells whether form element valid or not based on rules

Following are the different properties available for input controls for validation in angularjs and all these properties will return either true or false.

 

PropertyDescription
$pristine This property will help us to know whether form elements has been modified or not. It will return true if no form elements has been modified yet
$dirty It returns true if any form elements modified
$invalid It tells whether field invalid or not based on rules
$valid It tells whether field valid or not based on rules
$touched It returns true if field has touched or blurred
$untouched It tells field has not been touched or blurred yet

Accessing AngularJS Properties of Form and Input Fields

We can access properties of form and input fields for validations like as shown following

 

           - Access the form properties like <form name>.<angular property>

 

           - Access the Input field properties like <form name>.<input name>.<angular property>

 

We will see how to use these properties to validate form and input fields in angularjs applications with simple example.

AngularJS Form with Input Fields Validation Example

Following is the example of using different properties of form and input fields in angularjs application to show validation messages to user based on requirements.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Form and Input Validation Controls

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>

<body>

<div ng-app="">

<form name="personForm">

First Name: <input type="text" name="firstname" ng-model="person.fname" required />

<span ng-show="personForm.firstname.$touched && personForm.firstname.$invalid "> Required! </span><br /><br />           

Last Name:<input type="text" name="lastname" ng-model="person.lname" required />

<span ng-show="personForm.lastname.$dirty && personForm.lastname.$valid"> Thanks for Text </span><br /><br />

</form>

</div>

</body>

</html>

If you observe above example for first name textbox we are showing error message when control was touched or blurred and if there is no input text. Same way for last name textbox we are checking whether textbox content modified or not using $dirty property and textbox containing text or not using $valid property. Now we will run and see the output of above example.

Output of AngularJS Form Validations Example

Following is the result of using different properties in form validations with input controls example in angularjs.

 

Angularjs form validation with different properties example result or output

AngularJS CSS Classes for Form Validation

In angularjs different classes added to forms for validation based on their status. Following are the classes add or removed from forms based on the statuses.

 

ClassDescription
ng-pristine No fields in form has been not modified yet
ng-dirty One or more fields in form has been modified
ng-valid It tells whether form content valid or not based on rules
ng-invalid It tells whether form content invalid or not based on rules

 We will see how to use these classes with simple example using forms.

AngularJS Applying Classes for Form Validation

Following is the example of using classes for form validation in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Applying classes for Form Validation

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<style>

form.ng-invalid {

background-color:#f2672e;

}

form.ng-valid {

background-color:#2b8bc0;

}

</style>

</head>

<body>

<div ng-app="">

<form name="personForm">

<br />

First Name:<input type="text" name="firstname" ng-model="person.fname" required /><br /><br />

Last Name:<input type="text" name="lastname" ng-model="person.lname" required />

<br /><br />

</form>

</div>

</body>

</html>

If you observe above code we written classes for form ng-valid and ng-invalid properties. We will run and see the output of example.

Output of AngularJS Apply Classes for Form Validations

Following is the result of applying classes for form validations in angularjs application.

 

Angularjs apply css classes for form validation example output or result

AngularJS CSS Classes for Input Field Controls Validation

In angularjs different classes added to input field controls for validation based on their status. Following are the classes add or removed from input controls based on the statuses.

 

ClassDescription
ng-pristine It returns true if field has not been modified yet
ng-dirty It returns true if field has been modified
ng-valid It tells whether field content valid or not based on rules
ng-invalid It tells whether field content invalid or not based on rules
ng-touched It tells field has been touched or blurred
ng-untouched It tells field has been not touched or blurred yet

 We will see how to use these classes with simple example using input fields.

AngularJS Applying Classes for Input Field Validation

Following is the example of using classes for input fields validation in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Applying classes for Input Fields Validation

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<style>

input.ng-invalid {

background-color:#f2672e;

}

input.ng-valid {

background-color:#2b8bc0;

}

</style>

</head>

<body>

<div ng-app="">

<form name="personForm">

<br />

First Name:<input type="text" name="firstname" ng-model="person.fname" required /> <br /><br />

Last Name:<input type="text" name="lastname" ng-model="person.lname" required />

<br /><br />

</form>

</div>

</body>

</html>

If you observe above code we written classes for input fields ng-valid and ng-invalid properties. We will run and see the output of example.

Output of AngularJS Apply Classes for Input Field Validations

Following is the result of applying classes for input field validations.

 

AngularJS Apply Classes for Input Field Validations Example Result or Output

AngularJS Form Validations with Input Controls Example

Here we will see how validate a form and its fields in angularjs with example. We will validate a form with input fields (name, address, contact no, email and its terms and conditions).

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Form Input Fields Validation Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>

var app = angular.module('formApp', []);

app.controller('formCtrl', function ($scope) {

 

$scope.sendForm = function () {

$scope.msg='Form Submited Successfully';

};

 

$scope.getClass = function (color) {

return color.toString();

}

});

</script>

<style>

.valid.false {

background: red;

}

.valid.true {

background: green;

}

.error {

color: red;

}

</style>

</head>

<body ng-app="formApp" ng-controller="formCtrl">

<h3>Form validation demo app in AngularJs</h3>

<form name="personForm" ng-submit="sendForm()">

<label for="name">Name</label>

<input id="name" name="name" type="text" ng-model="person.name" required />

<span class="error" ng-show="personForm.name.$error.required"> Required! </span>

<br /><br />

<label for="adress">Adress</label>

<input id="address" name="address" type="text" ng-model="person.address" required />

<span class="error" ng-show="personForm.address.$error.required"> Required! </span>

<br /><br />

<label for="contact">Contact No</label>

<input id="mobile" name="mobile" type="number" ng-model="person.mobile" required />

<span class="error" ng-show="personForm.mobile.$error.required">Required number!</span>

<span class="error" ng-show="personForm.mobile.$error.mobile">Invalid mobile!</span>

<br /><br />

<label for="email">Email</label>

<input id="email" name="email" type="email" ng-model="person.email" required />

<span class="error" ng-show="personForm.email.$error.required">Required!</span>

<span class="error" ng-show="personForm.email.$error.email">Invalid Email!</span>

<br /><br />

<input type="checkbox" ng-model="terms" name="terms" id="terms" required />

<label for="terms">I Agree to the terms.</label>

<span class="error" ng-show="personForm.terms.$error.required">You must agree to the terms</span>

<br /><br />

<button type="submit">Submit Form</button>

<br /><br />

<span>{{msg}}</span>

</form>

</body>

</html>

If you observe above code we added multiple controls to validate in form. Now we will run and see the output of above example.

Output of AngularJS Form Validation Example

Following is the result of validating controls on form in angularjs applications.

AngularJS Form Validation with Input Controls Example Output or Result

This is how we can implement validations to input controls in form in angularjs applications.