DEV Community

loading...

How To Validate Phone Number Using Jquery Input Mask

websolutionstuff profile image Websolutionstuff Originally published at websolutionstuff.com ・1 min read
  • In this small tutorial I will explain you how to validate phone number using jQuery input mask, Using jQuery input mask we can validate different type of phone no with different country code.

  • Here, we are using jQuery input mask JS for this example, so we can easily validate phone no.

<html>
<head>
    <title>jquery input mask phone number validation - websolutionstuff</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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
</head>
<body>

<div class="container" style="border:1px solid red; padding: 0px 20px 20px 20px; margin-top: 20px;">
    <h1>jquery input mask phone number validation - websolutionstuff.com</h1>
    <br>
    <strong>Phone Number:</strong>  
    <input type="text" name="phone" class="phone_number form-control" value="9876543210">
    <br>
    <strong>Phone Number:</strong>  
    <input type="text" name="phone" class="phone_number_2 form-control" value="9876543210">
    <br>
    <strong>Phone Number:</strong>  
    <input type="text" name="phone" class="phone_number_3 form-control" value="91 9876543210">

</div>

<script>
    $(document).ready(function(){
        $('.phone_number').inputmask('(999)-999-9999');
        $('.phone_number_2').inputmask('(99)-9999-9999');
        $('.phone_number_3').inputmask('+99-9999999999');
    });
</script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In above code I have added input mask in jQuery for different validation.

You can see output in below screen print.

How To Validate Phone Number Using Jquery Input Mask

Also Read : Google Map With Draggable Marker Example

Discussion (0)

pic
Editor guide