Form validation with angularJS

Rakesh Sharma      5 Comments  

How to use 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.

Form validation with angularJS

  • 1. Validation :-
  • username – username is required,
    phone – phone is required, min-legth is 10, regex pattern match for numeric
    email – email is required, should be valid email

  • 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. You can learn more about angularjs form validation on official site docs.angularjs.org.

  • Arun

    This code is not working for me

    • rakesh sharma

      Are you facing any error? check your browser console for error

    • rakesh sharma

      Check now i have included codepen demo enter wrong emial and char in mobile you will see errors

  • Developer Appnings

    In console – WARNING: Tried to load angular more than once.

    Code not working.

  • Suraj Kharve

    hello Rakesh sir how can I display validation errors if user doesn’t fill any information and try to submit the form