Article | Date posted : 28 January, 2014 | Updated on : 2 February, 2014

Validating telephone numbers using jQuery

Sponsored Links

In today’s article I will be delving into validating the telephone numbers on the fly using jQuery. We will cover to allow numbers only, setting a range of numbers and also having the input field activate the number keyboard on the mobile device.

mobile checkout telephone number keyboard

mobile checkout telephone number keyboard

Step 1 : adding the input field

We will first add our input field, in the input field we will set the type to tel, this will enable the activation of the number keyboard once the field is tapped on.

Step 2 : the validation script

With the validation script I will first show you the full script and than explain each part for you to understand.

Step 3 : explaining it all

In the first part of the function we will strip all empty spaces, these spaces if not removed will be counted as a character and we don’t want that. As we want to count the true telephone number length. Removing spaces can be done .replace(/ /g,”); What you are doing is replacing the space with no space, so in theory it’s not stripping but replacing.

After we have removed all empty spaces we check if the value is numbers only with a native jQuery function isNumber.

If the value is a number we will want to know the character count, we do this by checking the length.

Now that we know how long the value is, we will want to set a minimum. If the value is less than 10 than we will want to process an error.

As an extra feature, you can also set the maximum character count.

As written in the previous article about how to validate email addresses, I apply a red border around the input field to highlight the error. Before I apply the css styling for the border, I check how wide the screen is. As for small screens I will apply a 1px border while on larger screens I will apply a 3px border. You can use the following script to detect what size the screen is.

Once the window size has been detected I will apply rules in the error. Listing alongside a function to scroll to the input field. If you where not to scroll to the error than the visitor will have little difficulties understanding what is going on.

I than record the error in a global variable so that I can use it in other areas within the document

Step 4 : On focus

On focus is a function that lets you trigger events when a visitor clicks away from the field, its good practice to enable instant error detection so that the person can edit the mistake within an instance. Before we check if the number is correct or not, we want to reset the css styling. We create a function reset(“id”)

Now that we have a function that resets the styling back to its original settings, we want to trigger the function that checks if the phone number is a valid number.

Step 5 : On Click

The second part of the validation triggering is the on click event, we will add a continue button.

We now add the jQuery event that will trigger when the button is clicked on

 Explaining the on click event

As before we will visually change the button when its clicked on, and remove the continue class so that it can not be clicked on while it’s processing the script.

We than reset the styling and validate the phone number

Log all errors, if an error is seen we simply increment the error variable, and not pass the form and throw out the error message or styling.

If there are no errors, we will collect the input information and pass it on to an ajax form.

It’s as easy as that, building websites is so easy once you know how. My advice to my fellow developers is, read read read… try try try 🙂


Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me