AngularJS Form Validation



Angularjs providing  form validation facility, so that the user can be notified of invalid input.  This provides a safer user experience, because the user receives instant feedback on how to rectify the mistake. Maintain in brain that while client-side validation plays an important part in providing a good user experience, it can easily be circumvented and thus can not be trusted. Server-side validation is still necessary for a secure application.

We need 2 files

Formvalidation.html
app.js

Formvalidation.html


 <!DOCTYPE html>  
 <html>  
 <head>  
   <!-- CSS -->  
   <!-- load bootstrap -->  
   <link rel="stylesheet" href="css/bootstrap.min.css">   
   <style>  
        body      { padding-top:30px; }  
   </style>  
   <!-- JS -->  
   <!-- load angular -->  
   <script src="js/anguler_1.2.js"></script>   
   <script src="js/app.js"></script>  
 </head>  
 <!-- apply angular app and controller to our body -->  
 <body ng-app="formValidationApp" ng-controller="formController">  
 <div class="container">  
 <div class="col-sm-8 col-sm-offset-2">  
   <!-- PAGE HEADER -->  
   <div class="page-header"><h3>AngularJS Form Validation with HTML5</h3></div>  
   <!-- FORM -->  
   <!-- novalidate is used to disable browser's native form validation -->  
   <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>   
     <!-- NAME -->  
     <div class="form-group">  
       <label>Name *</label>  
       <input type="text" name="name" class="form-control" ng-model="name" required>  
       <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>  
     </div>  
     <!-- USERNAME -->  
     <div class="form-group">  
       <label>Username</label>  
       <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>  
       <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>  
       <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>  
       <p ng-show="userForm.username.$invalid && !userForm.username.$pristine" class="help-block">Please enter Username</p>  
     </div>  
     <!-- EMAIL -->  
     <div class="form-group">  
       <label>Email</label>  
       <input type="email" name="email" class="form-control" ng-model="email">.  
       <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>  
     </div>  
     <!-- SUBMIT BUTTON -->  
     <button type="submit" class="btn btn-primary">Submit</button>  
   </form>  
 </div><!-- col-sm-8 -->  
 </div><!-- /container -->  
 </body>  
 </html>  

A few central stops to notice here

novalidate is used to disable browser's native form validation

The ngModel directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model

app.js

 //app.js  
 // create angular app  
 var formValidationApp = angular.module('formValidationApp', []);  
 // create angular controller  
 formValidationApp.controller('formController', function($scope) {  
   // function to submit the form after all validation has occurred                 
   $scope.submitForm = function(isValid) {  
     // check to make sure the form is completely valid  
     if (isValid) {  
       alert('our form is amazing');  
     } else {  
       alert("All values are not filled Please check")  
     }  
   };  
 });  


Nikunj K

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.