FORM VALIDATION IN ANGULARJS

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 552  View(s)
Ratings:
Rate this:
We want to  Validate Form  in AngularJS. How to do this please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: Form Validation in AngularJS

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <script src="~/Scripts/jquery-1.9.1.js"></script>
        <script src="~/Scripts/angular.js"></script>
        <title>Forum</title>
      <script>
          var app = angular.module('myApp', []);

          app.controller('validationCtrl', function ($scope) {

              $scope.name = 'Aditya';

              $scope.email = 'aditya06630h@gmail.com';

              $scope.password = '********';

              $scope.city = 'allahabad';

              $scope.country = 'India';

              $scope.mobile = '8953249451';

          });
    </script> 
    </head>
    <body> 
      Form Vailidation
        <form ng-app="myApp" ng-controller="validationCtrl" name="myForm" novalidate>  
            <table>
                <tr> 
                    <td>Name: 
                    </td> 
                    <td></td>
                    <td>
                        <input type="text" name="user" ng-model="name" required>
                        <span style="color: red" ng-show="myForm.name.$dirty && myForm.name.$invalid"> 
    <span ng-show="myForm.name.$error.required">Username is required.</span> 
                        </span> 
                    </td>
                </tr>   
                <tr>   
                    <td>   
                        Email: </td> 
     
                    <td></td> 
     
                    <td> 
     
                        <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 address.</span> 
     
                        </span> 
     
                    </td> 
     
                </tr> 
     
                <tr> 
     
                    <td>Password: 
     
                    </td> 
     
                    <td></td> 
     
                    <td> 
     
                        <input type="text" name="password" ng-model="password" required> 
     
                        <span style="color: red" ng-show="myForm.password.$dirty && myForm.password.$invalid"> 
     
    <span ng-show="myForm.password.$error.required">Password is required.</span> 
     
                        </span> 
     
                    </td> 
     
                </tr> 
     
                <tr> 
     
                    <td>City: 
     
                    </td> 
     
                    <td></td> 
     
                    <td> 
     
                        <input type="text" name="city" ng-model="city" required> 
     
                        <span style="color: red" ng-show="myForm.city.$dirty && myForm.city.$invalid"> 
     
    <span ng-show="myForm.city.$error.required">City is required.</span> 
     
                        </span> 
                    </td> 
     
                </tr> 
     
                <tr> 
     
                    <td>Country: 
     
                    </td> 
     
                    <td></td> 
     
                    <td> 
     
                        <input type="text" name="country" ng-model="country" required> 
     
                        <span style="color: red" ng-show="myForm.country.$dirty && myForm.country.$invalid"> 
     
    <span ng-show="myForm.country.$error.required">Country is required.</span> 
     
                        </span> 
     
                    </td> 
     
                </tr> 
     
                <tr> 
     
                    <td>Mobile: 
     
                    </td> 
     
                    <td></td> 
     
                    <td> 
     
                        <input type="text" name="mobile" ng-model="mobile" required> 
     
                        <span style="color: red" ng-show="myForm.mobile.$dirty && myForm.mobile.$invalid"> 
     
    <span ng-show="myForm.mobile.$error.required">Mobile is required.</span> 
     
                        </span> 
                    </td> 
     
                </tr> 
     
                <tr> 
     
                    <td></td> 
     
                    <td></td> 
     
                    <td> 
     
                        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty
                            && myForm.email.$invalid || myForm.password.$dirty && myForm.password.$invalid || myForm.city.$dirty
                            && myForm.city.$invalid || myForm.country.$dirty && myForm.country.$invalid || myForm.mobile.$dirty
                            && myForm.mobile.$invalid" /> 
     
                    </td> 
     
                </tr> 
     
            </table> 
     
        </form> 
     
    </body> 
    </html>

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!