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
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.
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
//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
<!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.