Home > DeveloperSection > Forums > Form Validation in AngularJS
Ankit Singh

Total Post:341

Points:2389
Posted on    February-23-2016 10:36 PM

 Angular JS JQuery  Angular JS 
Ratings:


 1 Reply(s)
 221  View(s)
Rate this:
We want to  Validate Form  in AngularJS. How to do this please help me.


aditya kumar Patel

Total Post:244

Points:1736
Posted on    February-23-2016 10:38 PM

@{
    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>

 


Don't want to miss updates? Please click the below button!

Follow MindStick