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

Contents

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.

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

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.

Phone Number Validation

JavaScript: HTML Form – Phone Numbers validation

Validate a 10 digit phone number

Related posts: