How To Validate Phone Number Using Jquery Input Mask

Websolutionstuff | Jun-12-2020 | Categories : jQuery

In this small tutorial, I will explain to you how to validate phone numbers using jquery input mask, Using jquery input mask we can validate different types of phone no with different country codes. Here, we are using jquery inputmask js for this example, so we can easily validate phone no.

So, let's see how to validate phone numbers using jquery input mask, how to validate phone numbers using regex, how to validate mobile numbers in javascript using regular expression, phone no validation using jquery, and how to validate mobile numbers in jquery, phone number validation regex.

<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 the above code, I have added inputmask in jquery for different validation.

 

 

Output:

 input_mask_example

 


You might also like:

Recommended Post
Featured Post
Carbon Add Years To Date In Laravel 9
Carbon Add Years To Date In La...

In this article, we will see carbon add years to date in laravel 9. Carbon provides addYear() and addYears() functi...

Read More

Nov-21-2022

How To Setup And Configuration Angular 15
How To Setup And Configuration...

Setting up and configuring Angular 15, the latest version of the popular JavaScript framework, is a crucial step in star...

Read More

Jun-07-2023

How To Record And Play Audio In JavaScript
How To Record And Play Audio I...

In this article, we will see how to record and play audio in javascript. Here, we will learn about how to record au...

Read More

Feb-20-2023

Multi Step Form Wizard jQuery Validation
Multi Step Form Wizard jQuery...

In this article, we will see multi step form wizard jquery validation. Here, we will learn jquery validation for mu...

Read More

Jan-30-2023