In this article I will explain with an example, how to implement Indian Mobile Number validation using Regular Expression (Regex) in jQuery.
HTML Markup
The following HTML Markup consists of an HTML TextBox, SPAN and a Button.
Mobile Number:
<input type="text" id="txtMobileNumber" />
<span id="lblError" class="error">Invalid Mobile Number.</span>
<hr/>
<input type="button" id="btnSubmit" value="Submit" />
Validating Mobile 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 Mobile Number TextBox is referenced and its value is tested using a Regular Expression.
The following conditions must satisfy for a Mobile Number to be termed as valid.
1. It should be 10 digits long.
2. The first digit should be a number. 6 to 9.
3. The rest 9 digits should be any number. 0 to 9.
4. It can have 11 digits including 0 at the starting.
5. It can have 12 digits including 91 at the starting.
Examples: 9876543210, 09876543210, 919876543210
<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|91)?[6-9][0-9]{9}$/;
if (regex.test($("#txtMobileNumber").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
![Indian Mobile 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
