April 2, 2017
User Input Form Validation with AngularJS
Hi, friends in this post we going to learn user input form validation with AngularJS. Now we’ll be looking at the ways that AngularJS supports us do form validations. We’ll focus on client side validation and use the built-in AngularJS form properties. The ng-valid and ng-invalid will automatically decide if an input is good based on the controls placed on the form. Now work through adding an error message for all of our inputs fields if they are not $valid and have previously been used. So we don’t need to show an error since they’ve been used. AngularJS will automatically decide if we should show an error based on an inputs $invalid and $pristine properties.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | User Input Form Validation with AngularJS</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div class="container"> <h1 align="center">User Input Form Validation with AngularJS</h1> <hr/> <div ng-app="sa_Validation" ng-controller="controller"> <form name="FormValidation" ng-submit="submitForm(FormValidation.$valid)" novalidate> <div class="form-group" ng-class="{ 'has-error' : FormValidation.name.$invalid && !FormValidation.name.$pristine }"> <label>Name*</label> <input type="text" name="name" class="form-control" placeholder="Enter Your Name" ng-model="user.name" required> <span ng-show="FormValidation.name.$invalid && !FormValidation.name.$pristine" class="help-block">You name is required.</span> </div> <div class="form-group" ng-class="{ 'has-error' : FormValidation.email.$invalid && !FormValidation.email.$pristine }"> <label>Email*</label> <input class="form-control" name="email" placeholder="Enter Your Email ID" type="email" ng-model="user.email" required> <span ng-show="FormValidation.email.$invalid && !FormValidation.email.$pristine" class="help-block">Your email address is invalid.</span> </div> <div class="form-group" ng-class="{ 'has-error' : FormValidation.comment.$invalid && !FormValidation.comment.$pristine }"> <label>Comment*</label> <textarea class="form-control" name="comment" placeholder="Enter Your Comment" ng-model="user.comment" ng-minlength="6" ng-maxlength="20" required></textarea> <p ng-show="FormValidation.comment.$error.minlength" class="help-block">Your comment is too short.</p> <p ng-show="FormValidation.comment.$error.maxlength" class="help-block">Your comment is too long.</p> </div> <button type="submit" class="btn btn-success">Submit</button> </form> </div> </div> <!-- Script --> <script> var sa_Validation = angular.module('sa_Validation', []); sa_Validation.controller('controller', function($scope) { $scope.submitForm = function(isValid) { if (isValid) { alert('Thank you for submission you comment..'); } }; }); </script> </body> </html> |
