Email Validation Using AngularJS

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 = '[email protected]';
        }  

    </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


Similar Articles