In this article I will explain with an example, how to perform GST Number validation in AngularJS.
This article will illustrate how to use AngularJS Form validation for TextBox and ng-pattern directive and Regular Expressions (Regex) for validating GST Number in AngularJS.
 
 
Validating GST Number using ng-pattern and Regular Expressions in AngularJS
The following HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The AngularJS app HTML DIV consists of an HTML Form with a TextBox to be validated, two HTML SPAN elements for displaying the error message for Required and GST Number validations and a HTML Button.
The Form
The HTML DIV consists of an HTML Form which has been created using following directives.
ng-submit - The ng-submit AngularJS directive which has been set with the expression MyForm.$valid, which means the Form will be submitted only if the $valid property of the Form is TRUE.
novalidate – It is an HTML5 attribute which directs the Browser to disable the HTML5 validations for the particular Form.
 
TextBox (INPUT)
required – It is an HTML5 attribute which is used to specify that the TextBox cannot be kept empty during Form submission.
ng-pattern – The ng-pattern AngularJS directive is used to specify the Regular Expressions (Regex) pattern for validating the TextBox text.
The following conditions must satisfy for a GST Number to be termed as valid.
1. It should be 15 characters long.
2. The first 2 characters should be a digit representing State Code.
3. The next 10 characters should be PAN number of the taxpayer.
Note: For more details on PAN Card Number validation, please refer my article PAN Card Number validation using Regular Expressions in AngularJS.
 
4. The 13th character should be any digit (1-9) or an alphabet.
5. The 14th character should be Z by default.
6. The 15th character should be an alphabet or any digit. 0-9.
Example: 06BZAHM6385P6Z2
 
SPAN
ng-show – The ng-show AngularJS directive will make the HTML SPAN visible only when the expression to be tested returns TRUE.
The first HTML SPAN will be visible when the Required validation for the GSTNumber TextBox is failing while the second HTML SPAN will be visible when the Regular Expressions (Regex) pattern validation for the GSTNumber TextBox is failing.
 
Submit Button
ng-disabled – The ng-disabled AngularJS directive will disable the Submit Button and enable only when the expression to be tested returns TRUE.
$invalid – The Submit Button will be enabled only if the $invalid property of the Form is FALSE.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) { });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <form name="MyForm" ng-submit="MyForm.$valid" novalidate=novalidate>
        GST Number:
        <input type="text" ng-model="GSTNumber" name="GSTNumber" required=required
                ng-pattern="/^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/" class="gst" />
        <span class="error" ng-show="MyForm.GSTNumber.$error.required">GST Number is required.</span>
        <span class="error" ng-show="MyForm.GSTNumber.$error.pattern">Invalid GST Number.</span>
        <hr/>
        <button type="submit" ng-disabled="MyForm.$invalid">Submit</button>
    </form>
</div>
 
 
CSS Class
The following CSS classes are used.
1. error – It will apply RED color to the error message.
2. GST – It will force the letters to be UPPER case.
<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    .error { color: Red; }
    .gst { text-transform: uppercase; }
</style>
 
 
Screenshot
GST (Goods and Services Tax) Number validation using Regular Expressions in AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code