Now days angularjs is the good front-end framework. In this post i will explain how to validate a form using angularjs. Lets create a sinple form and validate using angularjs.
Angular js text box validation using $touched and used ng-show directive to only show the error message. Include angularjs file within head tag of your page. Copy below angularjs file and add in your page.
1 2 3 | <scriptsrc ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </scriptsrc> |
I have used $touched directive to validate the textbox. Now create a index.html file and copy paste below code.
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 | < !DOCTYPE html> <html> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app=""> <div class="container"> <h1 class="text-center">How to validate a form using angularjs</h1> <h3 class="text-center">Try leaving the input field blank:</h3> <form name="myForm" class="form-horizontal"> <p>Name: <input name="myName" class="form-control" ng-model="myName" required/> <span style="color: red;" ng-show="myForm.myName.$touched && myForm.myName.$invalid">Please enter the name.</span> </p> <p>Email: <input name="email" class="form-control" ng-model="email" required/> <span style="color: red;" ng-show="myForm.email.$touched && myForm.email.$invalid">Please enter the email.</span> </p> <p>Address: <input name="myAddress" class="form-control" ng-model="myAddress" required/> <span style="color: red;" ng-show="myForm.myAddress.$touched && myForm.myAddress.$invalid">Please enter the address.</span> </p> </form> </div> </body> </html> |
See the live demo and then download the complete code from below link.
Live demo Download
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
Tags: angular bootstrap form, angularjs email validation, angularjs form, angularjs form validation, form validation, form validation angularjs
