10 Digit Phone Number Validation in jQuery
In this article, I'll show you how to validate phone numbers using jQuery. We'll explore different methods for validating phone numbers in PHP with jQuery. Specifically, we'll look at an example of validating 10-digit phone numbers using regular expressions (regex).
So, let's dive in and see how to validate phone numbers using jQuery, focusing on 10-digit mobile number validation with regex. We'll also see how to validate phone numbers in PHP using patterns.
10 Digit Phone Number Validation in jQuery
The Regex validation gives users the flexibility to enter numbers in different formats according to their requirements.
<html>
<head>
<title>10 Digit Phone Number Validation in jQuery - Techsolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form>
<h1>10 Digit Phone Number Validation in jQuery - Techsolutionstuff</h1>
<div class="col-md-6">
<label>Phone Number: </label>
<input class="form-control" type="text" name="phoneNumber" placeholder="Phone Number" minlength="10" maxlength="10" required>
<br>
<label>Phone Number: </label>
<input type="text" class="form-control" name="phoneNumber" placeholder="Phone Number" pattern="[1-9]{1}[0-9]{9}" required><br>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</body>
</html>
In this example, we'll validate a 10-digit phone number using jQuery with regular expressions.
<html>
<body>
Phone Number: <input type='text' id='phone_number'/>
<span id="validation_status"></span>
</body>
</html>
<script>
$(document).ready(function() {
$('#phone_number').blur(function(e) {
if (validatePhone('phone_number')) {
$('#validation_status').html('Valid');
$('#validation_status').css('color', 'green');
}
else {
$('#validation_status').html('Invalid');
$('#validation_status').css('color', 'red');
}
});
});
function validatePhone(phone_number) {
var a = document.getElementById(phone_number).value;
var filter = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
if (filter.test(a)) {
return true;
} else {
return false;
}
}
</script>
If you do not want a match on non-US numbers use.
^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$
Matches the following string examples.
123-456-7890
(123) 456-7890
123 456 7890
123.456.7890
+91 (123) 456-7890
In this example, we'll validate the phone number on form submission using jQuery and regex.
<html>
<head>
<title>Phone Number Validation on Form Submission - Techsolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="phoneForm">
<div class="col-md-6">
<label>Phone Number: </label>
<input type="text" id="phone_input" class="form-control" name="phoneNumber" placeholder="Phone Number" required>
<span id="form_validation_status"></span><br>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#phoneForm').on('submit', function(e) {
e.preventDefault();
if (validatePhoneInput()) {
$('#form_validation_status').html('Valid').css('color', 'green');
// You can proceed with form submission here
} else {
$('#form_validation_status').html('Invalid').css('color', 'red');
}
});
function validatePhoneInput() {
var phone = $('#phone_input').val();
var filter = /^[1-9][0-9]{9}$/;
return filter.test(phone);
}
});
</script>
</body>
</html>
You might also like:
- Read Also: How to Integrate Admin Template in Laravel 11
- Read Also: Laravel 11 Google Recaptcha V3 Validation
- Read Also: Laravel 11 Ajax Form Submit With Validation
- Read Also: Laravel Unique Validation on Update
