How to Validate Phone Number using jQuery Input Mask Plugin ?

Last Updated : 01 Jun, 2023

An input mask is a string expression that demonstrates the format of a valid user input value or we can say that it constrains user input. This is very useful if there are certain inputs in forms that require validation. In this article, we will learn how to apply an input mask for validating a phone number in an input element using jQuery.

There are two approaches that can be taken here:

Approach 1: Using the jQuery inputmask plugin, there are three input fields defined in the following example, each having a class of first-phone, second-phone and third-phone respectively. We select these elements using the jQuery class selector [$(".class-name")] and then apply the inputmask() method from the inputmask plugin on each input element. The parameter of this inputmask() method takes the specified string expression to constraint the user input to. In this case, we set three different formats of phone numbers for the three input fields.

CDN Link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js"></script>

Note: This link must be included in the index page to utilise the jQuery inputmask plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){

    // A static mask
    $(selector).inputmask("99-9999999"); 
  
    // Mask which specifies options
    $(selector).inputmask({"mask": "(999)-999-9999"});
});

Example: Below example illustrates the use of jQuery Input Mask Phone Number Validation using .inputmask() plugin.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- Required for using jQuery input mask plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js">
    </script>

    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            font-size: 40px;
        }

        p {
            font-size: 30px;
            font-weight: bold;
        }

        div:not(:last-child) {
            margin-bottom: 2rem;
        }
    </style>
</head>

<body>
    <h1>GeeksForGeeks</h1>

    <p>jQuery - Input Mask Phone Number Validation</p>


    <form>
        <div>
            <label>Phone Number 1:</label>
            <input type="text" 
                   name="phone" 
                   class="first-phone" 
                   placeholder="(999)-999-9999" />
        </div>

        <div>
            <label>Phone Number 2:</label>
            <input type="text" 
                   name="phone" 
                   class="second-phone" 
                   placeholder="(99)-9999-9999" />
        </div>

        <div>
            <label>Phone Number 3:</label>
            <input type="text" 
                   name="phone" 
                   class="third-phone" 
                   placeholder="+99-9999999999" />
        </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".first-phone").inputmask("(999)-999-9999");
            $(".second-phone").inputmask("(99)-9999-9999");
            $(".third-phone").inputmask("+99-9999999999");
        });
    </script>
</body>
</html>

Output:

Approach 2: Using the jQuery maskedinput plugin. There are four input fields defined in the following example, each having a class of first-phone, second-phone, third-phone and fourth-phone respectively. We select these elements using the jQuery class selector [$(".class-name")] and then apply the mask() method from the maskedinput plugin on each input element. The parameter of this mask() method takes the specified string expression to constraint the user input to. In this case, we set four different formats of phone numbers for the four input fields.

CDN Link:

<script src=

"https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js">

</script>

Note: This link must be included in the index page to utilise the jQuery maskedinput plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){
    $(selector).mask("99-9999999");
});

Example: Below is the example that illustrates the use of JQuery Input Mask Phone Number Validation using .mask() plugin.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- Required for using jQuery maskedinput plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js">
    </script>

    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            font-size: 40px;
        }

        p {
            font-size: 30px;
            font-weight: bold;
        }

        div:not(:last-child) {
            margin-bottom: 2rem;
        }
    </style>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>

    <p>jQuery - Input Mask Phone Number Validation</p>


    <form>
        <div>
            <label>Phone Number 1:</label>
            <input type="text" 
                   name="phone" 
                   class="first-phone" 
                   placeholder="(99)-9999-9999" />
        </div>

        <div>
            <label>Phone Number 2:</label>
            <input type="text" 
                   name="phone" 
                   class="second-phone" 
                   placeholder="+99-9999999999" />
        </div>

        <div>
            <label>Phone Number 3:</label>
            <input type="text" 
                   name="phone" 
                   class="third-phone" 
                   placeholder="(999)-999-9999" />
        </div>

        <div>
            <label>Phone Number 4:</label>
            <input type="text" 
                   name="phone" 
                   class="fourth-phone" 
                   placeholder="+999-99-99-999999" />
        </div>
    </form>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".first-phone").mask("(99)-9999-9999");
            $(".second-phone").mask("+99-9999999999");
            $(".third-phone").mask("(999)-999-9999");
            $(".fourth-phone").mask("+999-99-99-999999");
        });
    </script>
</body>
</html>

Output:

How to make a Password Input using jQuery Mobile ?

rajatsandhu2001

Improve

Article Tags :

How to Validate Phone Number using jQuery Input Mask Plugin ?

Similar Reads

Thank You!

What kind of Experience do you want to share?