Introduction To AngularJS: Form Validation - Day Twenty

In this 20th day of AngularJS article series, we are going to be learning the next key players/concept of AngularJS, understanding the concept of Form Validation of AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6
  7. Introduction to AngularJS – Day 7
  8. Introduction to AngularJS – Day 8
  9. Introduction to AngularJS – Day 9
  10. Introduction to AngularJS – Day 10
  11. Introduction to AngularJS – Day 11
  12. Introduction to AngularJS – Day 12
  13. Introduction to AngularJS – Day 13
  14. Introduction To AngularJS – Day 14
  15. Introduction To AngularJS – Day 15
  16. Introduction To AngularJS – Day 16
  17. Introduction to AngularJS – Day 17
  18. Introduction to AngularJS – Day 18
  19. Introduction to AngularJS – Day 19

Form Validation

AngularJS provides the client-side validation for input fields as well as forms. It also provides the information about whether the input field is modified or not etc. Following are some properties of input fields as well as forms:

  1. $dirty

    It returns true if user is interacted with form otherwise return false.

  2. $invalid

    It returns true if at least one input field or form is invalid otherwise return false.

  3. $valid

    It returns true if form and input fields is valid otherwise return false.

  4. $pristine

    It returns true if user is not interacted with the form yet otherwise return false.

  5. $pending

    It returns true if one of control or form is pending otherwise return false.

  6. $submitted

    It returns true if user submitted the form that is invalid otherwise return false.

  7. $error

    It contains references to controls or forms with failing validators.

Built-in validation tokens:

  • email
  • max
  • min
  • maxlength
  • minlength
  • number
  • pattern
  • required
  • date
  • time
  • etc.

Example:

In the following example we just created form tag with five input controls – Name, Email, Company Name, Designation and City. We set the compulsory validation for minlength and required every control, and we used AngularJS form validation.

app.js

  1. /// <reference path="angular.min.js" />  
  2. var app = angular.module("myApp", []);  
  3.   
  4. //Creating controller & injecteing $http service in controller  
  5. app.controller("myController", function ($scope, $http) {  
  6.       
  7.     $scope.update = false;  
  8.   
  9.     $scope.init = function () {  
  10.         $scope.temp = {  
  11.             id: 1,  
  12.             name: 'Jeetendra Gund',  
  13.             email: 'jeetendra@gmail.com',  
  14.             companyName: 'GNS',  
  15.             designation: 'Senior Analyst',  
  16.             city: 'Pune'  
  17.         };  
  18.     };  
  19.   
  20.     //Add Employee  
  21.     $scope.addEmployee = function () {  
  22.                  
  23.           
  24.     };  
  25.   
  26.     $scope.getError = function (error, name) {  
  27.         if (angular.isDefined(error)) {  
  28.             if (error.required && name == 'name') {  
  29.                 return "Please enter name";  
  30.             } else if (error.email && name == 'email') {  
  31.                 return "Please enter valid email";  
  32.             } else if (error.required && name == 'company_name') {  
  33.                 return "Please enter company name";  
  34.             } else if (error.required && name == 'designation') {  
  35.                 return "Please enter designation";  
  36.             } else if (error.required && name == 'email') {  
  37.                 return "Please enter email";  
  38.             } else if (error.required && name == 'city') {  
  39.                 return "Please enter city";  
  40.             } else if (error.minlength && name == 'name') {  
  41.                 return "Name must be 3 characters long";  
  42.             } else if (error.minlength && name == 'company_name') {  
  43.                 return "Company name must be 3 characters long";  
  44.             } else if (error.minlength && name == 'designation') {  
  45.                 return "Designation must be 3 characters long";  
  46.             } else if (error.minlength && name == 'city') {  
  47.                 return "City must be 4 characters long";  
  48.             }  
  49.         }  
  50.     }  
  51.   
  52. });  
In the above app.js file contains only two function first for initialization purpose and second addEmployee and third is for getting error messages from controller.

index.html
  1. <!DOCTYPE html>  
  2. <html ng-app="myApp">  
  3. <head>  
  4.     <title>Welcome to C# Corner</title>  
  5.     <meta charset="utf-8" />  
  6.     <link href="css/bootstrap.min.css" rel="stylesheet">  
  7.     <link href="css/font-awesome.min.css" rel="stylesheet">  
  8.     <link href="css/animate.min.css" rel="stylesheet">  
  9.     <link href="css/style.css" rel="stylesheet">  
  10.     <script src="scripts/jquery.min.js"></script>  
  11.     <script src="scripts/bootstrap.min.js"></script>  
  12.     <script src="scripts/angular.min.js"></script>  
  13.     <script src="app/app.js"></script>  
  14.   
  15. </head>  
  16. <body ng-controller="myController" ng-init="init()">  
  17.   
  18.     <div class="container">  
  19.         <h3 class="text-center">Form Validation of AngularJS</h3>  
  20.   
  21.         <div class="row mt80">  
  22.             <div class="col-md-4"></div>  
  23.   
  24.             <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 animated fadeInDown">  
  25.                 <form novalidate name="empForm">  
  26.                     <div class="form-group">  
  27.                         <label for="exampleInputEmail1">Name</label>  
  28.                         <input data-ng-minlength="3" required type="text" class="form-control" id="name" name="name" placeholder="Name" ng-model='temp.name'>  
  29.                         <span class="help-block error" data-ng-show="empForm.name.$invalid && empForm.name.$dirty">  
  30.                             {{getError(empForm.name.$error, 'name')}}  
  31.                         </span>  
  32.                     </div>  
  33.                     <div class="form-group">  
  34.                         <label for="exampleInputEmail1">Email</label>  
  35.                         <input data-ng-minlength="3" required type="email" class="form-control" id="email" name="email" placeholder="Email" ng-model='temp.email'>  
  36.                         <span class="help-block error" data-ng-show="empForm.email.$invalid && empForm.email.$dirty">  
  37.                             {{getError(empForm.email.$error, 'email')}}  
  38.                         </span>  
  39.                     </div>  
  40.                     <div class="form-group">  
  41.                         <label for="exampleInputPassword1">Company Name</label>  
  42.                         <input data-ng-minlength="3" required type="text" class="form-control" id="company_name" name="company_name" placeholder="Company Name" ng-model='temp.companyName'>  
  43.                         <span class="help-block error" data-ng-show="empForm.company_name.$invalid && empForm.company_name.$dirty">  
  44.                             {{getError(empForm.company_name.$error, 'company_name')}}  
  45.                         </span>  
  46.                     </div>  
  47.                     <div class="form-group">  
  48.                         <label for="exampleInputFile">Designation</label>  
  49.                         <input data-ng-minlength="3" required type="text" class="form-control" id="designation" name="designation" placeholder="Designation" ng-model='temp.designation'>  
  50.                         <span class="help-block error" data-ng-show="empForm.designation.$invalid && empForm.designation.$dirty">  
  51.                             {{getError(empForm.designation.$error, 'designation')}}  
  52.                         </span>  
  53.                     </div>  
  54.                     <div class="form-group">  
  55.                         <label for="exampleInputFile">City</label>  
  56.                         <input data-ng-minlength="4" required type="text" class="form-control" id="city" name="city" placeholder="City" ng-model='temp.city'>  
  57.                         <span class="help-block error" data-ng-show="empForm.city.$invalid && empForm.city.$dirty">  
  58.                             {{getError(empForm.city.$error, 'city')}}  
  59.                         </span>  
  60.                     </div>  
  61.                     <div class="text-center">  
  62.                         <input type="button" ng-disabled="empForm.name.$dirty && empForm.name.$invalid || empForm.email.$dirty && empForm.email.$invalid ||   
  63.                                empForm.company_name.$dirty && empForm.company_name.$invalid || empForm.designation.$dirty && empForm.designation.$invalid" loading-text="Saving Employee..." class="btn btn-save" ng-click="addEmployee()" value="Save">  
  64.                     </div>  
  65.                 </form>  
  66.             </div>  
  67.   
  68.         </div>  
  69.     </div>  
  70. </body>  
  71. </html>  
Output:

One the .html file in browser you can see output with default values as follows:

output

Now, just remove the ‘Company Name’ value and you can see error message as well as ‘Save’ button is disabled as follows:

output

This message contains for the required field, now following for the minlength as follows:

output

Now, see following output for all error messages as follows:

output

Great, Form Validation in AngularJS with example created successfully.

Summary

I hope that beginners as well as students understand concept of Form Validation in AngularJS with examples. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!
 
Read more articles on AngularJS: