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