How To Validate Phone Number Using jQuery

Websolutionstuff | Oct-24-2022 | Categories : PHP jQuery

In this article, we will see how to validate phone numbers using jquery. We will learn different methods of validating phone numbers in PHP with jQuery. Also, we will see an example of 10-digit phone number validation in PHP and mobile number validation using regex or regular expression.

So, let's see validate phone numbers using jquery, 10 digit mobile number validation in jquery using a regular expression, validates the phone number in PHP using a pattern.

Example 1: Validate 10 Digit Phone Number Using Regex 

The Regex validation gives flexibility to users to enter numbers in different formats as per users' requirements.

<html>
<head>
    <title>Allow Only 10 Digit Mobile Number Using Regex - 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>
</head>
<body>
<form>
    <h1>Allow Only 10 Digit Mobile Number Using Regex - websolutionstuff</h1>
   <div class="col-md-6">
    <label>Phone Number: </label>
    <input class="form-control" type="text" name="phone Number" placeholder="Phone Number" minlength="10" maxlength="10" required>
    <br>
    <label>Phone Number: </label>
  	<input type="text" class="form-control" name="phone Number" placeholder="Phone Number" pattern="[1-9]{1}[0-9]{9}"  required ><br>
    <button type="submit" class="btn btn-success">Submit</button>
  </div>
</form>
</body>
</html>

 

 

Example 2: Regular Expression To Match 10 Digit Phone Number

In this example, we will validate 10 digit phone number using jquery with regular expressions.

<html>
    <body>
        Phone Number: <input type='text' id='phone_number'/>
        <span id="validation_status"></span>
    </body>
</html>
<script>
$(document).ready(function() {
    $('#phone_number').blur(function(e) {
        if (validatePhone('phone_number')) {
            $('#validation_status').html('Valid');
            $('#validation_status').css('color', 'green');
        }
        else {
            $('#validation_status').html('Invalid');
            $('#validation_status').css('color', 'red');
        }
    });
});

function validatePhone(phone_number) {
    var a = document.getElementById(phone_number).value;
    var filter = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;    

    if (filter.test(a)) {
        return true;
    }
    else {
        return false;
    }
}
</script>

 

 

If you do not want a match on non-US numbers use.

^(\+0?1\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$

Matches the following string examples.

123-456-7890
(123) 456-7890
123 456 7890
123.456.7890
+91 (123) 456-7890

 


You might also like:

Recommended Post
Featured Post
PHP Access Modifiers Example
PHP Access Modifiers Example

In this example we will see PHP access modifiers example. In PHP default access modifier is public. PHP provide differen...

Read More

Sep-06-2021

How To Solve The Page Expired 419 Error In Laravel
How To Solve The Page Expired...

In this article, we'll learn how to resolve the "419 page expired" error in Laravel. You might have encoun...

Read More

Jun-28-2020

Implementing CQRS (Command Query Responsibility Segregation) in Laravel 11
Implementing CQRS (Command Que...

Hello, laravel web developers! In this guide, I'll show you how to implement CQRS (Command Query Responsibility Segr...

Read More

Sep-30-2024

Scaling for Success: Comparing cPanel Hosting with Easy Scalability
Scaling for Success: Comparing...

In today's digital landscape, your website serves as your storefront, your testimonial, and your voice. As your busi...

Read More

Jun-28-2024