jquery validation for mobile number

Today, We want to share with you jquery validation for mobile number.In this post we will show you jquery validate phone number regex, hear for jQuery form validations Email, Mobile Number we will give you demo and example for implement.In this post, we will learn about 10 Digit Mobile Number Validations Using Javascript With Jquery with an example.

How to allow only 10 digit number validation in Jquery?

<input type="number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" required>

Example 1: index.html

<!DOCTYPE html>  
  <html>  
   <head>  
     <title>Jquery Form Validations : 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() { 
  $('.error_Msg').hide(); 
  $('.submit').click(function(event){ 
    var data=$('.phone_val').val();  
     if(phone_validate(data)) 
     { 
       $('.error_Msg').hide();  // hides error msg if validation is true
     } 
     else 
     { 
       $('.error_Msg').show();   // shows validation msg if validation is false
       event.preventDefault(); 
     } 
    }); 
 }); 
   
   function phone_validate(phno) 
{ 
  var regexPattern=new RegExp(/^[0-9-+]+$/);    // regular expression pattern
  return regexPattern.test(phno); 
} 
 </script>
 <style>
   
    .error_Msg{ color:#fa4b2a; padding-left: 10px; } 
   body{font-family:Verdana;}
 </style>
 </head>  
      <body>
       <form  method="post" action="demo_process.php"> 
<p>Your cell No <input type="text"  class="phone_val"
  name="phone" /></p>
<input class="submit" type="submit" value="Submit"> 
  <p class="error_Msg"> Error! Phone number can contain only numbers from 0-9 and + or - sign 
</p> 
</form>
</body>
</html>

jQuery form validation Email, Mobile Number

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Makes "field" required and an email address. - www.pakainfo.com</title>
	<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
	<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>
</head>
<body>
	<form id="myform">
		<label for="name">Required, email: </label><br>
		<input class="left" id="name" name="name"><br>
		<label for="email">Required, email: </label><br>
		<input class="left" id="email" name="email"><br>
		<label for="phone">Required, Phone: </label><br>
		<input class="right" id="mobile" name="mobile">
		<br/>
		<input type="submit" value="Validate!">
	</form>

	<script>
	jQuery.validator.setDefaults({
	  debug: true,
	  success: "valid"
	});
	$( "#myform" ).validate({
	  rules: {
		name: {
		   required: true,
			minlength: 2
		},
		email: {
		  required: true,
		  email: true
		},
		mobile: {
		  required: true,
		  number: true,
		  minlength: 10,
		  maxlength: 10
		}
	  }
	});
	</script>
</body>
</html>   

I hope you get an idea about indian mobile number validation in jquery.
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 validate phone numbers using jquery?

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 *