Email Validation Using AngularJS

This article will show you how to use AngularJS for E-mail validation.

Validation

A Validation used to validate the data of an input control. If the data does not pass validation, it will display an error message to the user.

There are so many types of validation in AngularJS like Required Field, Minimum Length, Maximum Length, Pattern etc.

How To Validate Email Using AngularJS

1. Download angular.min.js file from AngularJS
2. Now use following code for Email Validation.

<!doctype html>

<html ng-app>
<
head>
    <script src="angular.min.js"></script>
    <script>  

        function Ctrl($scope) {

            $scope.text = 'abc@example.com';
        }  

    </script>

</head>
<
body>
    <form name="myForm" ng-controller="Ctrl">
    Email:
    <input type="email" name="input" ng-model="text" required>
    <span class="error" ng-show="myForm.input.$error.required">Required!</span> <span
        class="error" ng-show="myForm.input.$error.email">Not valid email!</span> <tt>{{text}}</tt><br />
    </form>
</
body>

</html>

Outputs

  1. When page will be load

    page load

  2. When TextBox will be Empty then.

    Images Empty TextBox

  3. When Email address will not be correct.

    Images/Email address incorrect

  4. When right Email Address will be enter.

    Email address correct