In this article I will explain with an example, how to implement Aadhaar Number validation using Regular Expression (Regex) in jQuery.
 
 
HTML Markup
The following HTML Markup consists of an HTML TextBox, SPAN and a Button.
Aadhaar Number:
<input type="text" id="txtAadhaar" />
<span id="lblError" class="error">Invalid Aadhaar Number</span>
<hr/>
<input type="button" id="btnSubmit" value="Submit" />
 
 
Validating Aadhaar Number using Regular Expression in jQuery
Inside the jQuery document ready event handler, the Submit Button has been assigned a jQuery Click event handler.
When the Submit Button is clicked, the Aadhaar Number TextBox is referenced and its value is tested using a Regular Expression.
The following Aadhaar Number formats will be termed as valid.
1. 12 digits without space. Ex: 123456789012
2. White space after every 4th digit. Ex: 1234 5678 9012
3. Hyphen (-) after every 4th digit. Ex: 1234-5678-9012
Finally, if the Aadhaar Number format is incorrect, then an HTML SPAN element with an error message is displayed.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {
            var regex = /^([0-9]{4}[0-9]{4}[0-9]{4}$)|([0-9]{4}\s[0-9]{4}\s[0-9]{4}$)|([0-9]{4}-[0-9]{4}-[0-9]{4}$)/;
            if (regex.test($("#txtAadhaar").val())) {
                $("#lblError").css("visibility", "hidden");
            } else {
                $("#lblError").css("visibility", "visible");
            }
        });
    });
</script>
 
 
CSS Class
The following CSS class is used.
error – It will apply RED color to the error message.
<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    .error { color: Red; visibility: hidden; }
</style>
 
 
Screenshot
Aadhaar Number validation using jQuery and Regular Expression
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

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

 
 
Demo
View Demo
 
 
Downloads
Download Code