How To Validate Phone Number Using Jquery Input Mask

WebSolutionStuff | Jun-12-2020 | Categories : jQuery

In this small tutorial i will explain you how to validate phone number using jquery input mask, Using jquery input mask we can validate diffrent type of phone no with diffrent country code. Here, we are using jquery inputmask 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>

In above code i have added inputmask in jquery for diffrent validation.

You can see output in below screen print.

 input_mask_example

Featured Post



Follow us
facebooklogo github instagram twitter