If you are building front-end forms, implementing jquery validation for 10-digit mobile number inputs is a critical step. When collecting contact information, ensuring that a user enters a valid mobile number is essential to prevent database errors and ensure data integrity.
In this comprehensive guide, we will explore different methods to set up jquery validation for 10-digit mobile number fields using regular expressions (Regex), event handlers, and real-time validation techniques.
Understanding the Mobile Number Regex Pattern
To validate a standard 10-digit mobile number (commonly used in countries like India), we use a Regular Expression. The standard regex pattern is:
/^[6-9]\d{9}$/Here is a breakdown of how this regular expression works according to standard JavaScript rules (you can read more on MDN Web Docs):
^: Asserts the start of the string.[6-9]: Ensures the first digit of the mobile number starts with 6, 7, 8, or 9 (standard mobile prefix rules).\d{9}: Requires exactly 9 digits to follow the first digit, bringing the total length to 10 digits.$: Asserts the end of the string.
How to Implement jQuery Validation for 10-Digit Mobile Number
Below are the three most common methods used by developers. To use these scripts, make sure you have imported the official jQuery Library into your project.
Method 1: Form Validation on Submit
This method ensures that the jquery validation for 10-digit mobile number triggers when the form is submitted. If the number is invalid, we prevent form submission and display an error message.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Number Validation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.error { color: red; font-size: 14px; margin-top: 5px; }
.success { color: green; font-size: 14px; margin-top: 5px; }
</style>
</head>
<body>
<form id="contactForm">
<label for="mobile">Enter 10-Digit Mobile Number:</label><br>
<input type="text" id="mobile" maxlength="10" placeholder="e.g. 9876543210">
<div id="validationMessage"></div><br>
<button type="submit">Submit Form</button>
</form>
<script>
$(document).ready(function() {
$("#contactForm").on("submit", function(e) {
var mobileNumber = $("#mobile").val();
var regex = /^[6-9]\d{9}$/;
if (mobileNumber === "") {
e.preventDefault();
$("#validationMessage").html("<span class='error'>Mobile number cannot be empty.</span>");
} else if (!regex.test(mobileNumber)) {
e.preventDefault();
$("#validationMessage").html("<span class='error'>Please enter a valid 10-digit mobile number starting with 6-9.</span>");
} else {
$("#validationMessage").html("<span class='success'>Validation successful! Form submitted.</span>");
}
});
});
</script>
</body>
</html>Method 2: Restricting Keyboard Input in Real-Time
To improve user experience (UX), you can prevent users from typing letters or special characters into the input field in the first place, allowing only numbers to be entered. This helps keep the form clean.
$(document).ready(function() {
$("#mobile").on("keypress", function(e) {
// Get the ASCII code of the key pressed
var keyCode = e.which ? e.which : e.keyCode;
// Allow only numbers (ASCII codes 48 to 57)
if (keyCode < 48 || keyCode > 57) {
e.preventDefault();
}
});
});Method 3: Real-Time Input Validation using AJAX
If you want to verify if the entered mobile number is already registered in your database, you can make a background asynchronous AJAX call when the input field loses focus (on blur):
$(document).ready(function() {
$("#mobile").on("blur", function() {
var mobileNumber = $(this).val();
var regex = /^[6-9]\d{9}$/;
if (regex.test(mobileNumber)) {
$.ajax({
url: "check-mobile.php", // Your backend validation endpoint
method: "POST",
data: { mobile: mobileNumber },
success: function(response) {
if (response === "exists") {
$("#validationMessage").html("<span class='error'>Mobile number already registered.</span>");
} else {
$("#validationMessage").html("<span class='success'>Mobile number is available.</span>");
}
}
});
} else {
$("#validationMessage").html("<span class='error'>Invalid format.</span>");
}
});
});Summary of Best Practices
- Use
maxlength="10": Always limit the input field length in HTML to prevent extra characters. - Include Server-Side Validation: Client-side validation using jQuery is great for UX, but it can be bypassed. Always double-check validation on your server (PHP, Node.js, etc.) before saving data. For more on web serialization concepts, see our guide on JSON Serialization.
[…] To conclude, using .val() combined with .change() is the recommended standard way to change dropdown selections in jQuery. For other front-end validations, check out our guide on jQuery Mobile Number Validation. […]
[…] Input Validation: For client-side validation details on mobile and text fields, check out our guide on jQuery input field validation. […]
[…] Because there is no branch instruction, the CPU executes the loop at a constant, highly optimized speed regardless of whether the array is sorted or unsorted. If you want to understand how other front-end validations are handled in web development, you can check out our guide on jQuery Input Validation. […]