Post
Ask Question

Angular Validation With ng-Pattern Using Regular Expression

Introduction
 
In this blog, let's discuss how to validate a form with AngularJS ng-pattern using regular expressions.
 
Background
 
Most of the times, we have to create form with validate input fields. Then we require to write code in JavaScript or server-side code for validation .This blog will show you how to achieve validation with reg-ex very easily.
 
Below, I have created a demostration example.
 
Step 1

We create HTML file and include reference of AngularJS file from CDN.
 
Step 2

We create ng-app, ng-controller, and inject module.
 
Step 3

We create Controller in JavaScript .
 
Step 4

We use ng-pattern for giving regular expression.
 
Step 5

We create span or div for hiding and showing when user input is $dirty or $invalid value. 
 
HTML Code Snippet
  1. <html ng-app="myApp">  
  2. <head>  
  3.     <title>ng-pattern with regx</title>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
  5. </head>  
  6. <body>     
  7.    <h1  style="text-align:center">Validation Example</h1>  
  8.  <div ng-controller="cntrl" style="margin-left:500px">  
  9.         <form name="SaveForm" ng-submit="funcSave()">  
  10.         <table border="1" cellspacing="0" cellpadding="10">  
  11.             <tr>  
  12.                 <td>Name</td>  
  13.                 <td><input type="text" required  maxlength="60" ng-pattern="/^[a-zA-Z. ]*[a-zA-Z]{1,60}$/"  name="name"  ng-model="name" />   
  14.                  <br/>                  
  15.                  <span style="color:red" ng-show="SaveForm.name.$dirty && SaveForm.name.$invalid" class="ng-hide">   
  16.                   Please Enter Valid  Name.!  
  17.                  </span>  
  18.                 </td>                 
  19.             </tr>  
  20.             <tr>                  
  21.                 <td>Date Of Birth (dd/mm/yyyy)</td>  
  22.                 <td><input type="text" required ng-pattern="/^(0[1-9]|[12][0-9]|3[01])[\/](0[1-9]|1[012])[\/](19|20)\d\d$/"  ng-model="dob" name="dob" />  
  23.                   <br/>                     
  24.                  <span style="color:red" ng-show="SaveForm.dob.$dirty && SaveForm.dob.$invalid" class="ng-hide">   
  25.                    Please Enter Valid  Date Of Birth.!  
  26.                    </span>  
  27.                 </td>  
  28.             </tr>  
  29.             <tr>  
  30.                 <td>Email</td>  
  31.                 <td><input type="text" maxlength="100" required ng-pattern="/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/" name="email" ng-model="email" />      
  32.                 <br/>                   
  33.                 <span style="color:red" ng-show="SaveForm.email.$dirty && SaveForm.email.$invalid" class="ng-hide">   
  34.                 Please Enter Valid  Email.!  
  35.                 </span>                  
  36.                 </td>  
  37.                 </tr>  
  38.                   
  39.                 <tr>  
  40.                 <td>Mobile No </td>  
  41.                 <td><input type="text" required maxlength="10" ng-pattern="/^[7-9][0-9]{9}$/" name="mobileno" ng-model="mobileno" />   
  42.                  <br/>                      
  43.                 <span style="color:red" ng-show="SaveForm.mobileno.$dirty && SaveForm.mobileno.$invalid" class="ng-hide">   
  44.                    Please Enter Valid  Mobile No.!  
  45.                    </span>  
  46.                 </td>  
  47.                </tr>  
  48.                  
  49.                 <tr>  
  50.                 <td>Pin code </td>  
  51.                 <td><input type="text" required maxlength="6" ng-pattern="/^[1-9][0-9]{5}$/" name="pincode" ng-model="pincode" />  
  52.                  <br/>      
  53.                 <span style="color:red" ng-show="SaveForm.pincode.$dirty && SaveForm.pincode.$invalid" class="ng-hide">   
  54.                    Please Enter Valid  Pin.!  
  55.                    </span>  
  56.                 </td>  
  57.             </tr>  
  58.              
  59.             <tr>  
  60.                 <td colspan="4" style="text-align:center"><input type="submit" value="submit" /></td>  
  61.             </tr>  
  62.         </table>  
  63. </form>  
  64.  </div>     
  65.  </body>  
  66. </html>   
JavaScript Code Snippet
  1. <script>  
  2.  var app = angular.module("myApp", []);  
  3.       app.controller('cntrl',function($scope){  
  4.           
  5.        $scope.funcSave = function()  
  6.        {  
  7.           if($scope.SaveForm.$valid) {  
  8.              alert("Form is Valid..!!");  
  9.              }  
  10.           else  
  11.           {  
  12.           alert("Form is not Valid..!!");  
  13.           }  
  14.        }  
  15.          
  16.        })      
  17.             
  18. </script>  
Output Screenshots
 

Note

One thing that you should keep in mind is - ng-pattern given name tag is required in input box and textarea. You can also create common JSON file for all forms accessing regx and given value in $rootscope.
 
Summary
 
I hope, you understood how to use regular expression in AngularJS ng-pattern.