This website uses cookies in order to offer you the most relevant information and services online. Please accept cookies for optimal performance.
Learn More

Validate Phone Number Format using jQuery

Aug 13, 2016

Phone validation while validating a HTML form is a very important point. In this page we shall discuss how to validate a phone number having a specific format e.g. (111) 222-3333.

validate-phone-number-format-using-jquery

Step 1: Create a Form to Input Phone Number

To create the form use the following code.

<h1>Phone Number Validation</h1>
<form method="post" action="action.php">
<label>Phone Number</label>
<input type="text" name="phonenumber" id="phonenumber">
<input type="submit" value="Submit">
</form>

Figure 1

Step 2: Function to Validate Phone Number

The function will validate numbers, spaces and will automatically format the phone number to (111) 222-3333, when the number of digits added to textbox is 10.

jQuery(document).ready(function($){
    $cf = $('#phonenumber');
    $cf.blur(function(e){
	phone = $(this).val();
	phone = phone.replace(/[^0-9]/g,'');
	if (phone.length != 10)
	{
	    alert('Phone number must be 10 digits.');
	    $('#phonenumber').val('');
	    $('#phonenumber').focus();
	}
   });
});
					

PHP Application Framework
Batoi Framework is a PHP application framework with an Integrated Development Environment for Next Generation Apps and Services on the Cloud.
Create your web application without worrying about small things.
Give your feedback to improve the article

Need our assistance? We are available with you.

Existing Customer?
Get Support
Talk To Consultant?
Get An Appointment
Contact Us

Batoi global offices and contact details

Stay Connected

Join our community, newsletters, and social media.