How To Validate Phone Number Using jQuery
Websolutionstuff | Oct-24-2022 | Categories : PHP jQuery
In this article, we will see how to validate phone numbers using jquery. We will learn different methods of validating phone numbers in PHP with jQuery. Also, we will see an example of 10-digit phone number validation in PHP and mobile number validation using regex or regular expression.
So, let's see validate phone numbers using jquery, 10 digit mobile number validation in jquery using a regular expression, validates the phone number in PHP using a pattern.
The Regex validation gives flexibility to users to enter numbers in different formats as per users' requirements.
<html>
<head>
<title>Allow Only 10 Digit Mobile Number Using Regex - websolutionstuff</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>Allow Only 10 Digit Mobile Number Using Regex - websolutionstuff</h1>
<div class="col-md-6">
<label>Phone Number: </label>
<input class="form-control" type="text" name="phone Number" placeholder="Phone Number" minlength="10" maxlength="10" required>
<br>
<label>Phone Number: </label>
<input type="text" class="form-control" name="phone Number" 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 will validate 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
You might also like:
- Read Also: Laravel 9 AJAX CRUD Example
- Read Also: How To Validate Form In React JS
- Read Also: Laravel 8 Image Upload Validation
- Read Also: How To Validate Max File Size Using Javascript
Recommended Post
Featured Post
Laravel 10 Composer-runtime-ap...
In this article, we will see laravel/framework[v10.0.0, ..., v10.0.3] require composer-runtime-api ^2.2 error fixed...
Mar-07-2023
How To Get Current Week Record...
In this tutorial, we will see how to get current week records in MySQL. Many times we need to get current week reco...
Feb-07-2022
How To Get Selected Checkbox L...
In this tutorial, I will explain you to how to get the selected checkbox value from a checkbox list in jquery, If y...
Jun-17-2020
Laravel 10 Multiple Image Uplo...
In this article, we will see laravel 10 multiple image examples. Here, we will learn about how to upload multiple i...
Mar-17-2023