HTML Markup
The following HTML Markup consists of an HTML TextBox, SPAN and a Button.
The Button has been assigned a JavaScript OnClick event handler.
GST Number:
<input type="text" id="txtGSTNumber" class="gst" />
<span id="lblError" class="error"></span>
<hr />
<input type="button" value="Submit" onclick="ValidateGSTNumber()" />
Validating GST Number using Regular Expression in JavaScript
When the Submit Button is clicked, the ValidateGSTNumber JavaScript function is executed.
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.
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
<script type="text/javascript">
function ValidateGSTNumber() {
var gstNumber = document.getElementById("txtGSTNumber").value;
var lblError = document.getElementById("lblError");
lblError.innerHTML = "";
var expr = /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$/;
if (!expr.test(gstNumber)) {
lblError.innerHTML = "Invalid GST Number.";
}
}
</script>
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
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads