Home > DeveloperSection > Forums > Form validation in Angular JS.
Ankit Singh

Total Post:341

Points:2389
Posted on    March-01-2016 11:02 PM

 Angular JS Angular JS 
Ratings:


 1 Reply(s)
 306  View(s)
Rate this:
We want to Form validation in Angular JS. How to vailidate please help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    March-01-2016 11:06 PM

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>


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

Follow MindStick