Enforcing GST Number Validation in HTML Input Using jQuery

Unlock Flawless GST Number Entry with Real-Time jQuery Validation

  • 156 views
  • 3 minute read
0 Shares
0
0
0
0
0
0
0
0
Shares
0
0
0
0
0
0
Table of Contents Hide
  1. Introduction
  2. What Is a GST Number?
  3. Challenge: Allow Only Valid Input
  4. How We Can Solve This Using HTML and jQuery
    1. HTML and jQuery Code
  5. How This Code Works
  6. Conclusion

Introduction

The Goods and Services Tax (GST) is a critical part of the tax system in India, and each business must register for GST and obtain a GST number. The format of a GST number is quite specific, and ensuring that users input it correctly can sometimes be tricky.

In this blog post, we’ll walk you through creating an HTML input field using jQuery that only allows valid GST numbers. This solution ensures that users input the GST number according to the exact format and prevents errors during data entry.

What Is a GST Number?

A GST Number is a unique identifier assigned to businesses and entities registered under the Goods and Services Tax in India. The structure of a GST number follows a specific pattern:

Example: AAAPL1234C1Z5

  • First 2 letters: State code (A-Z)
  • Next 10 characters: Alphanumeric (A-Z, 0-9)
  • Next character: 1 uppercase letter (A-Z)
  • Next character: 1 digit (0-9)
  • Last character: 1 uppercase letter (A-Z)

Challenge: Allow Only Valid Input

The main challenge when accepting GST numbers in a form is ensuring that users enter them correctly. If a user enters a letter where a number is expected, or vice versa, it can result in invalid data that must be corrected manually.

Our solution enforces real-time validation of the GST number input by restricting the types of characters that can be entered based on their position in the GST number.

How We Can Solve This Using HTML and jQuery

We use jQuery to listen for the user’s input and dynamically validate the characters based on their expected position in the GST number format. Here’s how we accomplish this:

HTML and jQuery Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GST Number Input</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /* Optional: Styling for the input field */
    input {
      font-size: 16px;
      padding: 8px;
      width: 300px;
    }
  </style>
</head>
<body>

  <h2>Enter Your GST Number</h2>

  <form>
    <!-- GST Number input field -->
    <label for="gst">GST Number:</label>
    <input type="text" id="gst" name="gst" maxlength="15" placeholder="AAAPL1234C1Z5" required>
    <br><br>
    <input type="submit" value="Submit">
  </form>

  <script>
    $(document).ready(function () {
      $('#gst').on('input', function (e) {
        var input = $(this).val().toUpperCase(); // Automatically make input uppercase

        // Restrict invalid input and format correctly
        var formatted = "";

        // Loop through each character in the input string
        for (var i = 0; i < input.length; i++) {
          var char = input[i];
          
          // Handle the first two characters (letters only)
          if (i < 2 && /[A-Z]/.test(char)) {
            formatted += char;
          }
          // Handle the next four characters (numbers only)
          else if (i >= 2 && i < 6 && /[0-9]/.test(char)) {
            formatted += char;
          }
          // Handle the next five characters (letters only)
          else if (i >= 6 && i < 11 && /[A-Z]/.test(char)) {
            formatted += char;
          }
          // Handle the next character (number only)
          else if (i == 11 && /[0-9]/.test(char)) {
            formatted += char;
          }
          // Handle the next character (letter only)
          else if (i == 12 && /[A-Z]/.test(char)) {
            formatted += char;
          }
          // Handle the last character (number only)
          else if (i == 13 && /[0-9]/.test(char)) {
            formatted += char;
          }
          // Handle the final character (letter only)
          else if (i == 14 && /[A-Z]/.test(char)) {
            formatted += char;
          }
        }

        // Set the value of the input with the formatted result
        $(this).val(formatted);
      });
    });
  </script>

</body>
</html>

How This Code Works

  1. Real-Time Validation:
    • The on(‘input’) event listener triggers every time the user types. It processes the input, converts it to uppercase (to ensure consistency), and formats it according to the required GST format.
  2. Input Restriction:
    • The input is validated by checking each character’s position:
      • The first two characters must be uppercase letters (A-Z).
      • The next four characters must be digits (0-9).
      • The next five characters must be uppercase letters (A-Z).
      • Then comes one digit (0-9), one letter (A-Z), one digit (0-9), and finally, one letter (A-Z).
  3. Formatting:
    • As the user types, the input is automatically corrected to match the format. If a user tries to enter a character that doesn’t belong in that position (like a letter where a number is required), the character is ignored.
  4. No Invalid Input:
    • This ensures that only valid characters are entered, and any invalid input is immediately rejected. This greatly reduces the possibility of errors in data entry.

Conclusion

In this blog, we’ve demonstrated how to use HTML and jQuery to create an input field for a GST number that enforces the correct format as users type. This ensures accurate data entry without relying on post-submission validation or user correction. By restricting input to valid characters and automatically formatting it, we can improve both the quality of data and the user experience.

Feel free to implement this solution in your forms and let us know if you encounter any challenges! Stay tuned for more tutorials on improving user experience and web forms.

For more jQuery support, click here

Previous Article
You May Also Like