Form validation with angularJS

If we want to implement client-side form validation try to make your form validation with angularjs, a new js framework available that’s angularjs. AngularJS includes cool features to make client-side form validations easy. There are many form properties and directives are available to make your form validation easy in angularJS.
In this article we will see some of most uses form properties and validation rules and how to make easily client side form validation with angularJS. First we will explore some properties and validation rules then we will make a example form to using all the stuffs.

To use angularJS form validations, Ensure that the form and all input must have name attribute. To define angularJs form properties name is required.

AngularJS Form Properties :-

Property	Class	Description
$valid	ng-valid	checks applied rules passed
$invalid	ng-invalid	checks applied rules not passed
$pristine	ng-pristine	form/input has not been used yet
$dirty	ng-dirty	form/input has been used
$touched	ng-touched	the control has been blurred
$untouched	ng-untouched	the control hasn’t been blurred

How to access angularJS form properties :-

Accessing form: formname.angular_property
Accessing input: formname.yourinputname.your_angular_property

AngularJS form validation rules :-

AngularJs supports HTML5 tags so you can use it easily to validate. like email, url, number. we will discuss here some validation rules check official site for more about validation rules.

novalidate:- To prevent the default HTML5 validations and prevent the browser to submitting the form.

<form name="myTestForm" novalidate>

Required :- Input Field must have some values. you can’t leave it blank

<input type="text" name="username" required />

Minimum length :- To validate input field must have given minimum length char.

<input type="text" name="username" ng-minlength="5" />

Maximum length:- To validate input field must have less then given maximum length char.

<input type="text" name="username" ng-maxlength="20" />

Pattern :- To validate a regex pattern ng-pattern=”/PATTERN/”:

<input type="text" name="username" ng-pattern="/^[0-9]+$/" />

Form validation with angularjs example :-

Now we will see a complete example of Form validation with angularjs. what we are making.

1. Validation :-
2. Apply validation on blur
3. Disabling submit button
4. Show error messages

Now make a file named index.html and add below code:-

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJs Form Validation Example</h2>
<form ng-app="myValidateApp" ng-controller="validateCtrl" name="myTestForm" ng-submit="submitForm(myTestForm.$valid)" novalidate>
<p>Username:<br />
<input type="text" name="username" ng-model="username" ng-model-options="{ updateOn: 'blur' }" required><br />
<span style="color:red" ng-show="myTestForm.username.$dirty && myTestForm.username.$invalid">
<span ng-show="myTestForm.username.$error.required">Username is required.</span>
</span>
</p>

<p>Phone:<br />
<input type="text" name="phone" ng-model="phone" ng-minlength="10" ng-model-options="{ updateOn: 'blur' }" ng-pattern="/^[0-9]+$/" required><br />
<span style="color:red" ng-show="myTestForm.phone.$dirty && myTestForm.phone.$invalid">
<span ng-show="myTestForm.phone.$error.required">Phone is required.</span>
<span ng-show="myTestForm.phone.$error.pattern">Phone must be numeric.</span>
<span ng-show="myTestForm.phone.$error.minlength">Phone must be min 10 char.</span>
</span>
</p>

<p>Email:<br />
<input type="email" name="email" ng-model="email" ng-model-options="{ updateOn: 'blur' }" required><br />
<span style="color:red" ng-show="myTestForm.email.$dirty && myTestForm.email.$invalid">
<span ng-show="myTestForm.email.$error.required">Email is required.</span>
<span ng-show="myTestForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit" value="Submit" ng-disabled="myTestForm.phone.$dirty && myTestForm.phone.$invalid || myTestForm.username.$dirty && myTestForm.username.$invalid || myTestForm.email.$dirty && myTestForm.email.$invalid">
</p>
</form>

<script>
var app = angular.module('myValidateApp', []);
app.controller('validateCtrl', function($scope) {
    // function to call on form submit       
   $scope.submitForm = function(isValid) {
   // check all goes fine?
   if (isValid) {
     alert('You are done to understand angularjs form validation');
   }
};
});
</script>

Let’s discuss above form :-

Disabling HTML5 Validation and submit :- we are using novalidate form tag to disable html5 validation and form submission. cause we making validation at our end.
ng-app="myValidateApp" :- angularJS application initializing
ng-controller="validateCtrl" :- define a controller
ng-submit="submitForm(myTestForm.$valid)" :- submitForm() method will be call on form submit

<form ng-app="myValidateApp" ng-controller="validateCtrl" name="myTestForm" ng-submit="submitForm(myTestForm.$valid)" novalidate>

Applying rules and showing error messages on blur :-

ng-model :- to bind input data to application
ng-model-options="{ updateOn: 'blur' }" :- checking rules on blur
ng-show :- for showing error, error will be show on if input is invalid and has been used
ng-pattern="/^[0-9]+$/" :- matching a regex pattern

<p>Username:<br />
<input type="text" name="username" ng-model="username" ng-model-options="{ updateOn: 'blur' }" required><br />
<span style="color:red" ng-show="myTestForm.username.$dirty && myTestForm.username.$invalid">
<span ng-show="myTestForm.username.$error.required">Username is required.</span>
</span>
</p>

Enable/disable submit button :- below condition check if all is going fine and form has been passes all rules then submit button will be enabled. else will be disabled if you have used any input.

<input type="submit" value="Submit" ng-disabled="myTestForm.phone.$dirty && myTestForm.phone.$invalid || myTestForm.username.$dirty && myTestForm.username.$invalid || myTestForm.email.$dirty && myTestForm.email.$invalid">

Calling function on form submit:- now we are calling a success function on form submission

<script>
var app = angular.module('myValidateApp', []);
app.controller('validateCtrl', function($scope) {
    // function to call on form submit       
   $scope.submitForm = function(isValid) {
   // check all goes fine?
   if (isValid) {
     alert('You are done to understand angularjs form validation');
   }
};
});
</script>

And you got that, Now you are done form validation with angularjs.