AngularJS Form Validation

Share:


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")  
     }  
   };  
 });  


10 comments:

  1. This post is so interactive and informative.keep update more information...
    hadoop training in velachery
    Big data training in chennai

    ReplyDelete
  2. This post is so interactive and informative.keep update more information...
    Angularjs training in anna nagar
    Angularjs Training in Chennai

    ReplyDelete
  3. Great post. keep sharing such a worthy information.
    Hadoop Training in Chennai

    ReplyDelete
  4. Much obliged for sharing this brilliant substance. its extremely fascinating. Numerous web journals I see these days don't actually give whatever pulls in others however the manner in which you have plainly clarified everything it's truly awesome. There are loads of posts But your method of Writing is so Good and Knowledgeable. continue to post such helpful data and view my site too...
    How to make a paper airplane | Origami paper plane | Boomerang Airplane | how to make a eagle paper airplane | Best paper airplane design for distance and speed | Nakamura lock paper airplane
    Eagle paper plane | Zazoom | Easy Freezy

    ReplyDelete
  5. Great post. keep sharing such a worthy information.
    SEO Training in Chennai
    SEO Course

    ReplyDelete

Ads