How to validate phone numbers using jquery?

Today, We want to share with you phone number validation jquery.In this post we will show you how to validate 10 digit mobile number using regular expression in laravel or php., hear for 10 digit mobile number validation in javascript we will give you demo and example for implement.In this post, we will learn about how to allow only 10 digit mobile number validation using javascript with jquery with an example.

Phone Number Validation

Here’s a simple jQuery code Examples to check if a string is either a phone number or email address. It could be very useful for checking form validation. You can then have a input called “Email Address or Phone Number” then on submit check the value and if its a phone number then set value to the phone input and clear email input before form submit.

Read Also:  jquery validation for mobile number

jQuery Code

//validate name
var name = $('input[name="name"]').val();
if (name.length < 3)
{
    alert('Please enter a name 3 characters or more.');
    return false;
}

//validate email
var email = $('input[name="email"]').val(),
    emailReg = /^([w-.][email protected]([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(email) || email == '')
{
     alert('Please enter a valid email address.');
     return false;
}

//validate cellphoneNummber
var cellphoneNummber = $('input[name="phone"]').val(),
    intRegex = /[0-9 -()+]+$/;
if((cellphoneNummber.length < 6) || (!intRegex.test(cellphoneNummber)))
{
     alert('Please enter a valid cell phoneNummber.');
     return false;
}

To valid a phone number like

  • XXX-XXX-XXXX
  • XXX.XXX.XXXX
  • XXX XXX XXXX

use the following source code.

function checkPhoneNumberValid(userphonestr)
{
  var cellphoneNummber = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  if((userphonestr.value.match(cellphoneNummber))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

  • +XX-XXXX-XXXX
  • +XX.XXXX.XXXX
  • +XX XXXX XXXX
Read Also:  How to allow only 10 digit number validation in Jquery?

function checkPhoneNumberValid(userphonestr)
{
  var cellphoneNummber = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;
  if((userphonestr.value.match(cellphoneNummber))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

Example 1: index.html

<html>
<head>
    <title>Allow only 10 digit mobile no using regular expression - pakainfo.com</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 no using regular expression - pakainfo.com</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>

Example 2:

JavaScript: HTML Form – Phone Numbers validation

Example 3:

function checkcheckPhoneNumberValid(userphonestr)
{
  var cellphoneNummber = /^\d{10}$/;
  if((userphonestr.value.match(cellphoneNummber))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

Validate a 10 digit phone number

At first we validate a phone number of 10 digit. For example 1234567890, 0982560011, 99799**8585 etc.
HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />      
</head><body onload='document.userfrm.product_name.focus()'>
<div class="mail">
<h2>Input an Phone No.[xxxxxxxxxx] and Submit</h2>
<form name="userfrm" action="#">
<ul>
<li><input type='text' name='product_name'/></li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="checkPhoneNumberValid(document.userfrm.product_name)"/></li>
<li> </li>
</ul>
</form>
</div>
<script src="cellphoneNummber-all-numeric-validation.js"></script>
</body>
</html>

JavaScript Code

function checkPhoneNumberValid(userphonestr)
{
  var cellphoneNummber = /^\d{10}$/;
  if(userphonestr.value.match(cellphoneNummber))
  {
      return true;
  }
  else
  {
     alert("Not a valid Phone Number");
     return false;
  }
  }

I hope you get an idea about jquery to validate phone number.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  How to allow only 10 digit number validation in Jquery Example?

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *