How to Validate Phone Numbers using jQuery and Reqular Expression?

Today, We want to share with you jquery validate phone number.In this post we will show you validate phone number javascript, hear for phoneUS we will give you demo and example for implement.In this post, we will learn about jquery validate email address with an example.

jquery phone/mobile number validation

There are the Following The simple About Part of the additional-methods.js file Full Information With Example and source code.

As I will cover this Post with live Working example to develop indian mobile number validation in jquery, so the Validate for valid US phone number. is used for this example is following below.

Also Read This πŸ‘‰   javascript round to 2 decimal places - How to round Off a number upto 2 decimal places using JavaScript?

Also Read: how to allow only 10 digit mobile number validation using javascript with jquery?

jQuery form Validation phone Number

index.html

<!DOCTYPE html>  
  <html>  
   <head>  
     <title>Jquery Form Validation : Validate Phone Numbers  - www.pakainfo.com</title>  
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>  
$(document).ready(function() { 
  $('.display_error_message').hide(); 
  $('.submit').click(function(event){ 
    var data=$('.phone_val').val();  
     if(check_phone_validate(data)) 
     { 
       $('.display_error_message').hide();  // here also hides error msg if validation is return true
     } 
     else 
     { 
       $('.display_error_message').show();   // when shows validation msg if validation is return false
       event.preventDefault(); 
     } 
    }); 
 }); 
   
function check_phone_validate(mobile) 
{ 
  var regexPattern=new RegExp(/^[0-9-+]+$/);    // here regular expression pattern
  return regexPattern.test(mobile); 
} 
 </script>
 <style>
   
    .display_error_message{ color:#fa4b2a; padding-left: 10px; } 
   body{font-family:Verdana;}
 </style>
 </head>  
      <body>
       <form  method="post" action="demo_process.php"> 
<p>Your Phone No <input type="text"  class="phone_val"
  name="phone" /></p>
<input class="submit" type="submit" value="Submit"> 
  <p class="display_error_message"> Sorry! Your Phone number can contain only numbers from 0-9 and + or - sign 
</p> 
</form>
</body>
</html>

Example 2: phoneUS method

bellow simple example to Validate for valid US phone number.

Also Read This πŸ‘‰   php remove non numeric - How to remove non-alphanumeric characters in PHP stirng?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.pakainfo.com Makes "field" required and a US phone number.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="check_phone_validate">
<label for="field">Required, us phone number: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#check_phone_validate" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});
</script>
</body>
</html>

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery mobile number validation.
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.