AngularJS Form Validation Example
Today, We will start to learn with angularjs. So first We will discuss form validation with angularjs. We create the form using bootstrap and that form we will make angular form validation.
We will take form fields like as first name, last name, email, mobile and address. We will create form validation using the rules such as required, email, minlength, and maxlength. basically AngularJS provides its additional properties $dirty, $valid, $invalid, and $pristine. So we will check the form validation using the additional properties.
Let’s look at a below example.
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE html> <html> <head> <title>AngularJS Form Validation Example - XpertPhp</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <style> input.ng-invalid, textarea.ng-invalid { border-color:red; } </style> </head> <body> <div class="container"> <h2>AngularJS Form Validation Example</h2> <form method="post" name="myForm" ng-app="myApp" ng-controller="validateCtrl" novalidate> <div class="form-group"> <label for="txtFname">First Name*</label> <input type="text" class="form-control" name="txtFname" id="txtFname" ng-model="txtFname" required> <span style="color:red" ng-show="myForm.txtFname.$dirty && myForm.txtFname.$invalid"> <span ng-show="myForm.txtFname.$error.required">FirstName is required.</span> </span> </div> <div class="form-group"> <label for="txtLname">Last Name*</label> <input type="text" class="form-control" name="txtLname" id="txtLname" ng-model="txtLname" required> <span style="color:red" ng-show="myForm.txtLname.$dirty && myForm.txtLname.$invalid"> <span ng-show="myForm.txtLname.$error.required">LastName is required.</span> </span> </div> <div class="form-group"> <label for="txtEmail">Email*</label> <input type="email" class="form-control" name="txtEmail" id="txtEmail" ng-model="txtEmail" required> <span style="color:red" ng-show="myForm.txtEmail.$dirty && myForm.txtEmail.$invalid"> <span ng-show="myForm.txtEmail.$error.required">Email is required.</span> <span ng-show="myForm.txtEmail.$error.email">Invalid email address.</span> </span> </div> <div class="form-group"> <label for="txtMobile">Mobile*</label> <input type="text" class="form-control" name="txtMobile" ng-minlength="10" id="txtMobile" ng-model="txtMobile" required> <span style="color:red" ng-show="myForm.txtMobile.$dirty && myForm.txtMobile.$invalid"> <span ng-show="myForm.txtMobile.$error.required">Mobile is required.</span> <span ng-show="myForm.txtMobile.$error.minlength">required 10 digits.</span> </span> </div> <div class="form-group"> <label for="txtAddress">Address*</label> <textarea name="txtAddress" class="form-control" id="txtAddress" ng-model="txtAddress" required></textarea> <span style="color:red" ng-show="myForm.txtAddress.$dirty && myForm.txtAddress.$invalid"> <span ng-show="myForm.txtAddress.$error.required">Address is required.</span> </span> </div> <input type="submit" class="btn btn-success" ng-disabled="myForm.$invalid"> </form> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { }); </script> </body> </html> |
Please follow and like us:
