FORM VALIDATION IN ANGULAR JS.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 630  View(s)
Ratings:
Rate this:
We want to Form validation in Angular JS. How to vailidate please help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: Form validation in Angular JS.

    In this example form valid then visible Submit button .

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

         app.controller("VisitorFormController", function ($scope, $http) {      
             $scope.visitorInfo = {};
             $scope.storedInfo = {};         
             $scope.lastSampleIndex = 0;
             $scope.update = function (formData) {
                 $scope.storedInfo = angular.copy(formData);
             };
             
             $scope.reset = function () {
                 $scope.visitorInfo = angular.copy($scope.storedInfo);
             };
             $scope.isUnchanged = function (formData) {
                 return angular.equals(formData, $scope.storedInfo);
             };
             
             $scope.reset();

         });

          </script>

     
    <style>
     
    body {
        font-family: Helvetica,Arial;
        font-size: 10pt;
    }

    input {
      width:320px;
    }

    input.ng-invalid.ng-dirty {
     background-color:red;
    }

    /*  
    Unfortunately there is no consistent implementation
    for placeholder, which is the reason for this ugliness
    */
    input.ng-invalid.ng-dirty::-webkit-input-placeholder,
    input.ng-invalid.ng-dirty::-moz-placeholder,
    input.ng-invalid.ng-dirty::-ms-input-placeholder,
    input.ng-invalid.ng-dirty {
        color:#fff;
    }

    .outerwrapper {
     width:550px;
    }

    .formwrapper {
     border:1px solid #666;
     border-radius:8px;
     box-shadow: 5px 5px 5px #888888;
     float:left;
     margin-right:15px;
     padding:4px;
     width:450px;
     background: #F7F2E0;
    }

     

    .label {
     float:left;
      font-size:.9em;
     font-weight:bold;
     text-align:right;
     width:75px;
     margin-right:10px;
     line-height:20px;
    }

    .buttons {
     text-align: center;
     margin-top:15px;
    }

    .submitbtn:enabled {
     background-color:green;
     color:white;
    }

    .bold {
     font-weight:bold;
    }

        </style>
    </head>
    <body ng-app="rgValidation">
    <div class="outerwrapper" ng-app="rgValidation" ng-controller="VisitorFormController" >

     
     
      <p>TIP: The sample button will fill the form for you.</p>

     <div class="formwrapper">
      <form  name="valForm"
        class="visitorInfoForm"
        novalidate >
       <span class="label">First Name:</span>
       <input name="firstName" ng-model="visitorInfo.firstName" placeholder="First Name" required />
       <span class="valid" ng-show="valForm.firstName.$valid">&#10004;</span><br>
       
       <span class="label">Last Name:</span>
       <input name="lastName" ng-model="visitorInfo.lastName" placeholder="Last Name" required>
       <span class="valid" ng-show="valForm.lastName.$valid">&#10004;</span><br>
       
       <span class="label">Address:</span>
       <input name="address" ng-model="visitorInfo.address" placeholder="Address" required>
       <span class="valid" ng-show="valForm.address.$valid">&#10004;</span><br>
       
       <span class="label">City:</span>
       <input name="city" ng-model="visitorInfo.city" placeholder="City" required>
       <span class="valid" ng-show="valForm.city.$valid">&#10004;</span><br>
       
       <span class="label">State:</span>
       <input name="state" ng-model="visitorInfo.state" placeholder="State" required>
       <span class="valid" ng-show="valForm.state.$valid">&#10004;</span><br>
       
       <span class="label">Zip:</span>
       <input name="zip" type="number" ng-model="visitorInfo.zip" placeholder="Zip" required>
       <span class="valid" ng-show="valForm.zip.$valid">&#10004;</span><br>
       <span class="label">Email:</span>
       <input name="email" type="email" ng-model="visitorInfo.email" placeholder="Email" required>
       <span class="valid" ng-show="valForm.email.$valid">&#10004;</span><br>
       <div class="buttons">
        <button ng-click="reset()" ng-disabled="isUnchanged(visitorInfo)">CLEAR</button> 
        <button class="submitbtn" ng-click="update(visitorInfo)" ng-disabled="valForm.$invalid || isUnchanged(visitorInfo)">SUBMIT</button>
       </div>
          </form>
     </div>
    </div>
    </body>
       
    </html>

Answer

NEWSLETTER

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