Home » Support » Help Articles » Validate Phone Number Format using jQuery

Validate Phone Number Format using jQuery

Back to Help Articles Home


Phone validation while validating a HTML form is a very important point. In this page we shall discuss how to validate a phone number having a specific format e.g. (111) 222-3333

    Step 1: Create a Form to Input Phone Number

  1. To create the form use the following code.

    <h1>Phone Number Validation</h1>
    <form method="post" action="action.php">
    <label>Phone Number</label>
    <input type="text" name="phonenumber" id="phonenumber">
    <input type="submit" value="Submit">
    </form>
    

  2. Figure One

    Step 2: Function to Validate Phone Number

  3. The function will validate numbers, spaces and will automatically format the phone number to (111) 222-3333, when the number of digits added to textbox is 10.

    jQuery(document).ready(function($){
        $cf = $('#phonenumber');
        $cf.blur(function(e){
            phone = $(this).val();
            phone = phone.replace(/[^0-9]/g,'');
            if (phone.length != 10)
            {
                alert('Phone number must be 10 digits.');
                $('#phonenumber').val('');
                $('#phonenumber').focus();
            }
        });
    });
    



Updated on Aug 31, 2016

The techReview is an online magazine by Batoi and publishes articles on current trends in technologies across different industry verticals and areas of research. The objective of the online magazine to provide an insight into cutting-edge technologies in their evolution from labs to market.

Visit techReview


English - IN (USD)
New Users? Signup.     Existing Users? Login.