How to do validation in AngularJs


ValidationDemo

Validation is the one of important part of any library. In each library or Framework there will be different approach to do validation. Similarly there is some different way to do validation in AngularJs.

In AngularJs Form attribute play the main role in validation.

Now in below example we will see the demo example of doing validation of UserName and EmailId.

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="../Scripts/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
     app.controller('MyController', function($scope) {
     $scope.user = 'chandradev';
     $scope.email = 'chandradev@gmail.com';
});
    </script>
</head>

<body>
    <fieldset>
        <legend><b>Validation Example</b></legend>

        <form ng-app="myApp" ng-controller="MyController"
              name="myForm" novalidate>

            <p>
                UserName:<br>
                <input type="text" name="user" ng-model="user" required>
                <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                    <span ng-show="myForm.user.$error.required">UserName is required.</span>
                </span>
            </p>

            <p>
                Email:<br>
                <input type="email" name="email" ng-model="email" required>
                <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                    <span ng-show="myForm.email.$error.required">Email is required.</span>
                    <span ng-show="myForm.email.$error.email">Invalid Email ID.</span>
                </span>
            </p>

            <p>
                <input type="submit"
                       ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
                      myForm.email.$dirty && myForm.email.$invalid">
            </p>

        </form>
    </fieldset>
</body>

</html>

Point to remember:

1. In the above example ng-show=”myForm.user.$dirty && myForm.user.$invalid” is used to display the invalid message if the user type invalid data or left blank.

2. If the user will leave blank field then ng-show directive will display the error message as given below.

       <span ng-show="myForm.user.$error.required">UserName is required.</span>
       

3. For validation of emailid the given below code will do.

       <span ng-show="myForm.email.$error.email">Invalid Email ID.</span>
       

Summary:

In this article we learnt that how to do basic validation in angularJs

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: