AngularJS provides an additional functionality to validate a form in a very simple way. So, in this tutorial, we will explain how you can validate your forms using AngularJS.

In the previous blog, we have already learnt about how to create a form using angular.

Now, we’ll talk about validating a form at the client side.

Note:- While performing client side validation,  it’s also necessary to apply server side validation because of security reasons.

In AngularJS, there are some special properties of form by using which validation can be performed.

Watch the live demo or download code from the link given below.

Download script   

In angular, the value of ng-model corresponding to input field, will not be set until it passes complete validation.

For example, if there is an input box like <input type=”email”>, then the value of ng-model will not be set until it follows the email format  such as “[email protected]”.

Pabbly Form Builder

 AngularJS form Properties:

There are some properties of form in angular which is used to perform validation in form like $invalid, $valid, $dirty, $pristine, $touched.

These are of the boolean type means return true or false when called.

These properties will get called in different conditions.

     – $invalid: This property tells that the input which is entered is invalid.

     – $valid: This property tells that the input value is valid.

     – $dirty: This property tells that the form element is accessed.

     – $pristine: This property tells that the form element is not accessed yet.

Syntax of Properties:
To use property for validation, use the following syntax:

<formname>.<formelementname>.<propertyname>

Example: 

 <form name="frm" novalidate>
<input type="email" ng-model="user.email" name="email" placeholder="Enter Email Address" autocomplete="off" required>
<span ng-show="frm.email.$dirty && frm.email.$invalid">Email Address is not valid</span>
</form>

Explaination: In the above example, we have used $invalid and $dirty properties. It means, if the value is entered and it is invalid for the form-element, then the message within span tag will show.

 Form Controls Parameters:

There are some form control parameters provided by angular to perform validation on form input controls.

<input
ng-model="string"
[name="string"]
[required="string"]
[ng-required="boolean"]
[ng-minlength="number"]
[ng-maxlength="number"]
[ng-pattern="string"]
[ng-change="string"]
[ng-trim="boolean"]
required>
</input>

To know more about these input directives click here…

Example:

 <input type="text"
name="username"
ng-model="user.firstname"
placeholder="Enter First Name"
autocomplete="off"
required/>
<span ng-show="frm.username.$dirty && frm.username.$error.minlength">username contains atlest 5 character</span>
<span ng-show="frm.username.$dirty && frm.username.$error.maxlength">maximum 10 charecters allowed</span>

Note:- max-length and min-length are the keys of $error ( object hash containning reference to form and controls).

CSS Styling

There are some classes which will be automatically added by angular in the form-element according to the status of the input element.

     – ng-valid: Class added when the input is valid.

     – ng-invalid: Class added when the input is invalid

     – ng-dirty: Class added when the form element is accessed.

     – ng-pristine: Class added when the form element is not accessed yet.

     – ng-untouched: Class added when the form-element is not touched yet.

Explanation:  if an input box is empty a class ng-pristine will be automatically added but if the user entered something the ng-pristine class will be replaced by ng-dirty.

Creating an Application:

Let’s create a form and validate it using angular.

Requirement of form:

  • Name is required.
  • Email is required and it should be in the email format.
  • Password is required having minimum 5 and maximum 10 letters.
  • Message is required.
  • Gender must be selected.
  • Country must be selected.

First, add novalidate with the form to disable the html5 validation.

Note:- To use angular form validation, must disable the traditional HTML validation. For this, use nonvalidate validatation property in the form.

Also, use ng-disabled with the submit button to disable submit till all the values within the form control are valid.

Now, create a HTML file for the application and add angular.min.js and bootstrap.min.css file in our code.

To learn about installation process of angular in an application, read our blog AngularJS – Introduction & Installation.

HTML File: index.html:

This file creates a form in which validation is applied.

<html>
<head>
<title>AngularJS Forms</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="container">
<div class="row" ng-app="myApp" ng-controller="maincntrl">
<h2 class="text-center"> AngularJS - Form </h2>
<div class="col-md-offset-1 col-md-6 col-sm-12" >
<div class="login">
<h2>Registration Form</h2>
<!--Code of form started-->
<form class="form-horizontal" name="frm" novalidate>
<!--Code to validate first name is written here-->
<div class="form-group" >
<label id="label" class="control-label">First Name:</label>
<input type="text" class="form-control" name="username" ng-model="user.firstname" placeholder="Enter First Name" autocomplete="off" required />
</div>
<!--Code to validate email address is written here-->
<div class="form-group">
<label id="label" class="control-label">Email:</label>
<input type="email" class="form-control" ng-model="user.email" name="email" placeholder="Enter Email Address" autocomplete="off" required>
<span class="msg" ng-show="frm.email.$dirty && frm.email.$invalid">Email Address is not valid</span>
</div>
<!--Code to validate password is written here-->
<div class="form-group">
<label id="label" class="control-label">Password:</label>
<input type="password" class="form-control" ng-model="user.pass" name="pass" placeholder="Enter Password" autocomplete="off" ng-minlength="5" ng-maxlength="12" required>
<span class="msg" ng-show="frm.pass.$dirty && frm.pass.$error.minlength">password must contain atleast 5 charecters</span>
<span class="msg" ng-show="frm.pass.$dirty && frm.pass.$error.maxlength">max-length of password reached</span>
</div>
<!--Code to validate message input box-->
<div class="form-group">
<label id="label" class="control-label">Message:</label>
<textarea type="textarea" rows="2" cols="50" name="message" class="form-control" ng-model="user.message" placeholder="Enter Your Message" autocomplete="off" required></textarea><br>
<span class="msg" ng-show="frm.message.$error.required">Enter a message</span>
</div>
<!--Code to validate gender field-->
<div class="form-group">
<label id="label" >Gender:</label>&nbsp;&nbsp;&nbsp;
Male&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" ng-model="user.gender" value="male" required>
&nbsp;&nbsp;&nbsp;&nbsp Female <input type="radio" name="gender" ng-model="user.gender" value="female" required></br>
<span class="msg" ng-show="frm.gender.$error.required">select any gender</span>
</div>
<!--Code to validate country field-->
<div class="form-group">
<label id="label" class="control-label">Country:</label>
<select class="form-control" ng-model="user.country" name="cont" required>
<option value="india">India</option>
<option value="USA">USA</option>
<option value="switzerland">switzerland</option>
</select>
<span class="msg" ng-show="frm.cont.$error.required">Select a value</span>
</div>
<!--Code to disable submit button is written here-->
<div class="form-group">
<input ng-disabled="frm.$invalid" class="btn btn-warning" type="submit" ng-click="call()" value="Submit">
</div>
</form>
</div>
</div>
<!--code to show values after clicking pn submit button-->
<div class="col-md-offset-1 col-md-4 col-sm-12">
<div class="alert1" ng-show="submit_success" style="word-wrap:break-word;">
<div class="login" >
<h2>submitted values</h2>
<hr>
<h3 class="text-center">Submited Values:</h3>
<div class="row">
<div class="col-md-5 headname">
<b>FirstName:</b> </div> <div class="col-md-7"> {{server.firstname}}</div> </div>
<div class="row"><div class="col-md-5 headname"><b>Email: </b> </div> <div class="col-md-7"> {{server.email}}<br></div></div>
<div class="row"><div class="col-md-5 headname"><b>Password:</b></div><div class="col-md-7"> {{server.pass}}<br></div></div>
<div class="row"><div class="col-md-5 headname"><b>Message: </b></div><div class="col-md-7"> {{server.message}}<br></div></div>
<div class="row"><div class="col-md-5 headname"><b>Gender: </b></div> <div class="col-md-7">{{server.gender}}<br></div></div>
<div class="row"><div class="col-md-5 headname"><b>Country: </b></div><div class="col-md-7"> {{server.country}}<br></div></div>
<b>JSON Data: </b> {{server}}
</div>
</div>
</div>
</body>
</html>

JavaScript File: app.js

This file works after we click on submit button. It will retrieve and shows the submited values at the right side of form.

 var myApp = angular.module("myApp", []);
myApp.controller("maincntrl", function ($scope) {
$scope.submit_success = false;
$scope.call = function () {
$scope.server = angular.copy($scope.user);
$scope.submit_success = true;
}
}
);

CSS File: style.css 

It contains the styling CSS of the form.

@import url(http://fonts.googleapis.com/css?family=Raleway);
h2{
margin-top:20px;
margin-bottom:20px;
}
.login h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
.login hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 10px;
}
.login{
width:100%;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 10px;
word-wrap: break-word;
}
.login p{
margin-top:8px;
font-size:16px;
}
.login hr {
margin-bottom: 30px;
}
input[type=text]{
width:99.5%;
padding: 10px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
label#label{
margin-bottom:10px;
font-size:18px;
font-weight:bold;
}
textarea.ng-invalid{
border:1px solid red;
border-left: 5px solid red;
}
textarea.ng-valid.ng-dirty{
border:1px solid green;
border-left: 5px solid green;
}
select.ng-invalid{
border:1px solid red;
border-left: 5px solid red;
}
select.ng-valid.ng-dirty{
border:1px solid green;
border-left: 5px solid green;
}
input.ng-invalid{
border:1px solid red;
border-left: 5px solid red;
}
input.ng-valid.ng-dirty{
border:1px solid green;
border-left: 5px solid green;
}
span.msg{
margin-top:15px;
color:red;
}
.headname{
font-size:15px;
}

Note:- ng-disabled button disables the submit button until the form is $invalid.

Pabbly Form Builder

Conclusion:

I hope that now you got the concept of AngularJS form validation. Please share your feedback in the space given below. Keep visiting our website for further coding tricks.

You may also like –

Related Posts:

AngularJS Isolate Scope
AngularJS Custom Directive
AngularJS - Form