How to allow only 10 digit number validation in Jquery?

Today, We want to share with you How to allow only 10 digit number validation in Jquery?.In this post we will show you mobile number validation in JavaScript or Jquery, hear for Validate phone number using jquery & js we will give you demo and example for implement.In this post, we will learn about phone number validation in javascript form with an example.

How to allow only 10 digit number validation in Jquery
How to allow only 10 digit number validation in Jquery

10 digit mobile number validation in javascript

In this Article, We would tell how you can allow only 10 numbers in textbox using jquery .we just allow only 10 digit number validation in jquery. user can only enter 10 numbers in textbox using jquery for phone number or mobile validation.

We would give you simple 4 way good all about demo of how to restrict user to type 10 digit numbers in input element.we can do it that thing multiple way. We would display different types of the demo of only 10 digit validation in html

Another must read:  gcd of two numbers in c program

One it using pattern attribute in html as well as second is maxlength as well as jquery keypress event with mobile no validation in jquery Example. So you can just see both demo. You can see also preview bellow with Angular 7|8|9 Validate Mobile Number With 10 Digits Example. You can use anyone as you want.

here blow the demo allow only 10 numbers in textbox using jquery.

Example 1: mobile number validation in jquery

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

<!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 numbers" pattern="\d{10}" maxlength="10">
    <button type="submit">Submit</button>
</form>
</body>
</html>

Example 2: 10 digit phone number validation in html

<!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>Mobile</label>
    <input type="text" name="num" placeholder="Enter Mobile numbers" pattern="[1-9]{1}[0-9]{9}" maxlength="10">
    <button type="submit">Save</button>
</form>
</body>
</html>

Example 3:

<!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="allow_digit_number" class="moblie-no" placeholder="Please Enter Your Mobile numbers">
  
    <button type="submit">Clcik To save</button>
</form>
</body>
<script type="text/javascript">
   $("input[name=allow_digit_number]").attr("maxlength", "10");
  $('.moblie-no').keypress(function(e) {
      var mlengthtotal = [];
      var kk = e.which;
   
      for (i = 48; i < 58; i++)
          mlengthtotal.push();
   
      if (!(mlengthtotal.indexOf(kk)>=0))
          e.preventDefault();
  });
</script>
</html>

10 digit mobile number validation using javascript

Validation for 10 digit mobile number and focus input field on invalid with Validate phone number for 10 digit US numbers. mobile_number – The HTML input field containing the phone number to validate.format – Integer value that defines how to format the text field.

Another must read:  Renaming file while uploading Laravel

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JavaScript: Validating a 10-Digit Phone Number</title>
        <style type="text/css" media="all">
            body {
                font: 12px arial, sans-serif;
            }
        </style>
<script language="javascript" type="text/javascript">

function validatePhone(mobile_number, format) {
    var num = mobile_number.value.replace(/[^\d]/g,'');
    if(num.length != 10) {
        //Alert the user that the phone number entered was invalid.
        alert('Please enter Your valid phone/Mobile number including area simple some code');                    
    } else {
        //Your Email was valid.  If Mobile format type is set, format the Phone/Mobile to the desired style.
       switch(format) {
            case '0': //Format (NNN)-NNN-NNNN
                mobile_number.value = "(" + num.substring(0,3) + ")-" + 
                                    num.substring(3, 6) + "-" + num.substring(6);
                break;
            case '1': //Format NNN-NNN-NNNN
                mobile_number.value = num.substring(0,3) + "-" + 
                                    num.substring(3, 6) + "-" + num.substring(6);
                break;
            default: //Format NNNNNNNNNN
                mobile_number.value = num;
                break;
        }
    }
}
</script>
    </head>
    <body>
        <h1>Validating a 10 Digit Phone Number with JavaScript - www.pakainfo.com</h1>
        <h3>Test form - Enter any valid 10 digit phone number in any format.</h3>
        <form id="frmMain" action="" method="get">
            <input type="text" id="landPhone" name="landPhone" value="9999999999" />
            <select id="allow_digit_number" name="allow_digit_number">
                <option value="0">(NNN)-NNN-NNNN</option>
                <option value="1">NNN-NNN-NNNN</option>
                <option value="2">NNNNNNNNNN</option>
            </select>
            <input type="button" id="btnValidate" name="btnValidate" value="Validate" onclick="javascript:validatePhone(document.getElementById('landPhone'), document.getElementById('allow_digit_number').options[document.getElementById('allow_digit_number').selectedIndex].value);" />
        </form>
</div>
        
    </body>
</html>

Web Programming Tutorials Example with Demo

Read :

Another must read:  PHP Laravel Set Active Menu Examples

Summary

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

I hope you get an idea about Jquery (js) validation For 10 Digit Mobile Numbers.
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.