Introduction
This article exlains Required Field Validation and Email Validation using AngularJS.
AngularJS provides various kinds of validations that can be used in applications, in this article I will show only two types of validations provided by AngularJS, in other words Required Field and Email Validation.
Let's see the procedure to apply validations using AngularJS.
Step 1
First of all you need to download the AngularJS external file; that can be done either from the jQuery official website or you can also download the source code that I provided at the top of this article.
You can also download it from this link:
ANGULARJS After downloading the file you need to add it in the Head Section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now I will first show how to implement Required Field Validation using AngularJS.
First we will create a function in which one initial value will be passed that will be shown by default whenever the user visits the page.
This function can be created in following manner:
<script>
function x($scope) {
$scope.initialname = "Anu";
}
</script>
Here I have passed an initial value to the scope as "initialname".
Step 3
Now we will work on the design part where validation will be applied.
Write this code in the body section of your web page:
<body>
<div ng-app>
<form name="form1" ng-controller="x">
<label>Your Name:</label>
<input name="name" ng-model="initialname" required>
<span style="color:red" ng-show="form1.name.$error.required">
Please Provide Your name</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</body>
Here first you need to add ng-app to the Div tag otherwise Validations will not work properly. Then a name is provided to the form and the function name is passed in the ng-controller of the form.
Then a TextBox is created to which again a name is provided, in this the TextBox initial value is also bound using the ng-model.
Then a span is created in which ng-show is used, in this ng-show an error message is provided that will be activated when the user does not provide a value in the TextBox. This error message is provided in the following manner.
The first name of the form is provided, then this name of the TextBox is provided, then this $error is used that shows that it will be activated on getting an error and the final word is written as required that shows that it will check whether some value is provided or not.
At the end I took a button.
Now our application is created and is ready to be executed.
Output
On running the application you will see that the initial value is shown in the TextBox.
![Validations in AngularJS]()
But if I remove this initial value than an error message will be displayed just beside this TextBox.
![Validations in AngularJS]()
Now I am writing my complete name in this TextBox and you will see that the error message is gone.
![Validations in AngularJS]()
Until now you have seen the Required Field Validation, now I will show you how to apply Email Validation using AngularJS.
Step 4
I am adding an initial value for Email; as well, it will be added to the function that was present in the Head Section. So, now your function will look like this:
<script>
function x($scope) {
$scope.initialname = "Anu";
$scope.initialmail = "[email protected]";
}
</script>
Here "initialmail" contains the initial value that will be shown in the TextBox by default.
Step 5
After this I had added one more TextBox and Span in the body section that will be working for the Email.
So, now body Section is modified to be:
<body>
<div ng-app>
<form name="form1" ng-controller="x">
<label>Your Name:</label>
<input name="name" ng-model="initialname" required>
<span style="color:red" ng-show="form1.name.$error.required">
Please Provide Your name</span>
<br />
<br />
<label>Your Email: </label>
<input type="email" name="email" ng-model="initialmail">
<span style="color:red" ng-show="form1.email.$error.email">
Please Provide valid EmailID</span>
<br />
<br />
<input type="submit" value="Submit"/>
</form>
</div>
</body>
You can see that everything is similar except that in the Span the email is written instead of required.
Our application is ready to be executed.
Output
On running the application you will see that the initial value is shown in both of the Textboxes.
![Validations in AngularJS]()
Now If I provide an incorrect EmailId then an Error message will be shown just beside the second TextBox.
![Validations in AngularJS]()
Now I am providing the Email Id in correct format and you can see that the error message is gone.
![Validations in AngularJS]()