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
Downloads
