Home » how to allow only 10 digit mobile number validation using javascript with jquery

how to allow only 10 digit mobile number validation using javascript with jquery

In this Post,i shall say how you may allow only 10 numbers in textbox using jquery.we exactly allow only 10 digit number validation in jquery. guest may only enter 10 numbers in textbox using jquery for country code with phone number or mobile validation.

I will give you simple step by step all the example of how to restrict or required guest to type 10 digit numbers in input HTML element.we may do phone number validation in javascript it that thing multiple way.We shall show different format of 10 digit mobile number validation using javascript with jquery also you can check my prev Article email validation in javascript

10 digit mobile number validation using javascript with jquery

10 digit mobile number validation in javascript,10 digit mobile number validation in jquery,mobile number validation in jquery,10 digit mobile number validation using javascript,jquery mobile number validation,mobile no validation in jquery,10 digit phone number validation in html
how to allow only 10 digit mobile number validation using javascript with jquery

The validating mobile number is best and an important point while validating an HTML form. In this Article we have all about the how to validate a mobile number (in different format) using HTML/JavaScript/jQuery :

One it using pattern attribute in html and email validation in javascript another is max length and jquery keypress event. Therefor you may exactly display both example. You may display also source code bellow. You may use anyone as you want.

so, we validate a mobile number of 10 digits with no any type of the comma, no any spaces char, no any punctuation with there shall be Not allowded + sign in front the Mobile number. Simply how to check mobile number validation shall remove all non-digits with permit only mobile numbers with 10 digits. Here is the regular expression for 10 digit mobile number.

Read Also:  How to Open URL in New Tab using EmberJS

10 digit mobile number validation using javascript with jquery

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty - www.pakainfo.com</title>
<style>
li{list-style-type:none;font-size:16pt}.mail{margin:auto;padding-top:10px;padding-bottom:10px;width:400px;background:#d8f1f8;border:1px soild silver}.mail h2{margin-left:38px}input{font-size:20pt}input:focus,textarea:focus{background-color:#ffffe0}input submit{font-size:12pt}.rq{color:red;font-size:10pt}
</style>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[xxxxxxxxxx] and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1' /></li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="mobilenumber(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script>
function mobilenumber(userstrtxt)
{var phoneno=/^\d{10}$/;if(userstrtxt.value.match(phoneno))
{return true;}
else
{alert("Not a valid Phone Number");return false;}}
</script>
</body>
</html>

10 digit mobile number validation using HTML 5

here easy example for phone number validation in javascript

<!DOCTYPE html>
<html>
<head>
    <title>How to allow only 10 digit number validation in Jquery? - pakainfo.com</title>
</head>
<body>
<form>
    <h1>How to allow only 10 digit number validation in Jquery? - pakainfo.com</h1>
    <label>Numbers</label>
    <input type="text" name="num" placeholder="Enter your Mobile numbers" pattern="[1-9]{1}[0-9]{9}" maxlength="10">
    <button type="submit">Submit</button>
</form>
</body>
</html>

mobile number validation in jquery

<!DOCTYPE html>
<html>
<head>
    <title>How to allow only 10 digit number validation in Jquery? - pakainfo.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
    <h1>How to allow only 10 digit number validation in Jquery? - pakainfo.com</h1>
    <label>Moblie No</label>
    <input type="text" name="moblie_no" class="moblie-no" placeholder="Enter your Mobile numbers">
  
    <button type="submit">Submit</button>
</form>
</body>
<script type="text/javascript">
   $("input[name=moblie_no]").attr("maxlength", "10");
  $('.moblie-no').keypress(function(e) {
      var arr = [];
      var kk = e.which;
   
      for (i = 48; i < 58; i++)
          arr.push();
   
      if (!(arr.indexOf(kk)>=0))
          e.preventDefault();
  });
</script>
</html>

jquery mobile number validation

index.html

<!DOCTYPE html>  
  <html>  
   <head>  
     <title>www.pakainfo.com Jquery Form Validation : Validate Phone Numbers </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 = $('.mobilephonenoval').val();  
	     if(phone_validate(data)) 
	     { 
	       $('.error_Msg').hide();  
	     } 
	     else 
	     { 
	       $('.error_Msg').show();   
	       event.preventDefault(); 
	     } 
	    }); 
	 }); 
   
	function phone_validate(mobilephoneno) 
	{ 
	  var checkPattern =new RegExp(/^[0-9-+]+$/);
	  return checkPattern.test(mobilephoneno); 
	} 
 </script>
 <style>
   
.error_Msg{ color:#fa4b2a; padding-left: 10px; } 
body{font-family:Verdana;}
 </style>
 </head>  
<body>
  <form  method="post" action="do_submit.php"> 
<p>Your Phone No <input type="text"  class="mobilephonenoval"
  name="phone" /></p>
<input class="submit" type="submit" value="Submit"> 
  <p class="error_Msg"> sorry dear, Error! Phone number can contain only numbers from 0-9 and + or - sign 
</p> 
</form>
</body>
</html>

phone number validation in javascript onblur

Validation for 10 digit mobile number with focus or onblur input field on invalid

Read Also:  Installing laravel on windows wamp xampp

//HTML Code
<form name="member_details_form" method="post" id="member_details_form">

    Mmeber Full Name *
    <input class="input-style" name="name"  id="name" type="text" required> 
    Mmeber Email *
    <input class="input-style" name="email"  id="email" type="email" required>
    Mmeber Phone * 
    <input name="phone"  id="phone" type="number" required>

    <input type="submit" value="SUBMIT"  id="enq_submit"">

</form>

//jQuery Code
<script>
$('#member_details_form').validate({
  rules:{
  name:"required",
  email:{
  required:true,
  email:true
  },
  phone:{
      required:true,
  minlength:9,
  maxlength:10,
  number: true
  },
  messages:{
  name:"Please enter your username..!",
  email:"Please enter your email..!",
      phone:"Enter your Phone no"
  },
  submitHandler: function(form) {alert("working");
  //write your logic with success code here  
  }
  });
</script>

phone number validation with country code in javascript

Example of the Validate an international phone number with country code

Read Also:  Connect Multiple Databases in CodeIgniter

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty - www.pakainfo.com</title>
<style>
li{list-style-type:none;font-size:16pt}.mail{margin:auto;padding-top:10px;padding-bottom:10px;width:400px;background:#d8f1f8;border:1px soild silver}.mail h2{margin-left:38px}input{font-size:20pt}input:focus,textarea:focus{background-color:#ffffe0}input submit{font-size:12pt}.rq{color:red;font-size:10pt}
</style>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input an Phone No.[+xx-xxxx-xxxx, +xx.xxxx.xxxx, +xx xxxx xxxx] and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1' /></li>
<li> </li>
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="mobilenumber(document.form1.text1)" /></li>
<li> </li>
</ul>
</form>
</div>
<script>
function mobilenumber(userstrtxt)
{var phoneno=/^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/;if(userstrtxt.value.match(phoneno))
{return true;}
else
{alert("Not a valid Your Phone Number");return false;}}
</script>
</body>
</html>

mobile number validation in php

simply You can preg_match() to validate 10-digit mobile numbers:

preg_match('/^[0-9]{10}+$/', $mobile)

To call it in a simple PHP function:

function validate_mobile($mobile)
{
    return preg_match('/^[0-9]{10}+$/', $mobile);
}

How to validate phone number in PHP?
index.php

function validate_phone_number($phonevalidate)
{
     $filtered_phone_number = filter_var($phonevalidate, FILTER_SANITIZE_NUMBER_INT);
     $phone_to_check = str_replace("-", "", $filtered_phone_number);

     if (strlen($phone_to_check) < 10 || strlen($phone_to_check) > 14) {
        return false;
     } else {
       return true;
     }
}

$phonevalidate = "+91-888-555-9999";
if (validate_phone_number($phonevalidate) == true) {
   echo "Good Luck, Your Phone number is valid";
} else {
  echo "sorry dear your Invalid phone number";
}

Web Programming Tutorials Example with Demo

Read :

Summary

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

I hope you get an idea about phone/Mobile number validation in html.
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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Javascript Autocomplete Address Using PHP With Demo
  2. Read Also:  Laravel 6 Set Active Navigation Menu Example
  3. Read Also:  AngularJS Adding Form Fields Dynamically with PHP MySQLi
  4. Read Also:  How to allow only 10 digit number validation in Jquery?
  5. Read Also:  How to Open URL in New Window using jQuery?
  6. Read Also:  Angular 6 CRUD Operations Demo Example
  7. Read Also:  Insert Update Delete using PHP and mysql for Frontaccounting - crud
  8. Read Also:  how to check a plugin is activated or not in wordpress
  9. Read Also:  Angular 6 CRUD Operations Demo Example
  10. Read Also:  Laravel 6 Set Active Navigation Menu Example

Leave a Comment

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