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

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.

Read Also:  How to validate phone numbers using jquery?

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

Example 1: mobile number validation in jquery

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

Read Also:  PHP Google Two Factor Authentication With CodeIgniter 3

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 :

Read Also:  How to use Datatables in Laravel 5.8

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Capture Webcam Image with PHP and jQuery
  2. Read Also:  10 digit mobile number validation in javascript
  3. Read Also:  PHP Laravel Inline CRUD Using jQuery and AJAX
  4. Read Also:  jQuery DataTables Customisation Filter Searchbox
  5. Read Also:  jquery validation for mobile number
  6. Read Also:  Laravel Create Update Delete and Getters eloquent methods
  7. Read Also:  Jquery Restrict only 10 numbers input in textbox
  8. Read Also:  Validate Email and Password Fields on Form Submit Event
  9. Read Also:  jQuery Validate Email address using Regex Expression
  10. Read Also:  how to create database in mongodb?
CLOSEX