Post
Ask Question

Required Field and Email Validation Using AngularJS

Introduction

This article explains 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, which are required field and email validation.

Let's look at the procedure for applying validations using AngularJS.

Step 1. First of all, you need to download the AngularJS external file; that can be done either from the official jQuery 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 to 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, which will be shown by default whenever the user visits the page.

This function can be created in the 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 the 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.

Our application is created and is ready to be executed.

Output

When running the application, you will see that the initial value is shown in the TextBox.

Text Box

But if I remove this initial value, then an error message will be displayed just beside this TextBox.

Initial Value

Now, I am writing my complete name in this TextBox, and you will see that the error message is gone.

Error message

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; it will also 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 added one more TextBox and Span in the body section that will work for the Email.

So, now the 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.

Application

Now, If I provide an incorrect EmailId, then an Error message will be shown just beside the second TextBox.

Incorrect EmailId

Now I am providing the Email ID in the correct format and you can see that the error message is gone.

Email ID


Similar Articles