Introduction
Basics of DHTML
IE vs Netscape

DHTML Effects
Drop Down Menus
Tip Boxes

DHTML Forms
Date Validation
Email Validation
Phone No. Validation
Text Box Char Counter
Reset with Image field
Check All check boxes

Javascript Phone Number Validation

In forms when asking for phone numbers fields it is a good idea to use client side validation along with your programming language validation. The following example shows how you can do this.

Example

Example of phone validation

View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example

JavaScript Code

// Declaring required variables
var digits = "0123456789";
// non-digit characters which are allowed in phone numbers
var phoneNumberDelimiters = "()- ";
// characters which are allowed in international phone numbers
// (a leading + is OK)
var validWorldPhoneChars = phoneNumberDelimiters + "+";
// Minimum no of digits in an international phone no.
var minDigitsInIPhoneNumber = 10;

function isInteger(s)
{   var i;
    for (i = 0; i < s.length; i++)
    {   
        // Check that current character is number.
        var c = s.charAt(i);
        if (((c < "0") || (c > "9"))) return false;
    }
    // All characters are numbers.
    return true;
}

function stripCharsInBag(s, bag)
{   var i;
    var returnString = "";
    // Search through string's characters one by one.
    // If character is not in bag, append to returnString.
    for (i = 0; i < s.length; i++)
    {   
        // Check that current character isn't whitespace.
        var c = s.charAt(i);
        if (bag.indexOf(c) == -1) returnString += c;
    }
    return returnString;
}

function checkInternationalPhone(strPhone){
s=stripCharsInBag(strPhone,validWorldPhoneChars);
return (isInteger(s) && s.length >= minDigitsInIPhoneNumber);
}

function ValidateForm(){
	var Phone=document.frmSample.txtPhone
	
	if ((Phone.value==null)||(Phone.value=="")){
		alert("Please Enter your Phone Number")
		Phone.focus()
		return false
	}
	if (checkInternationalPhone(Phone.value)==false){
		alert("Please Enter a Valid Phone Number")
		Phone.value=""
		Phone.focus()
		return false
	}
	return true
 }
</script>

HTML Code

Explanation of the Code

The JavaScript has the following main functions:

Function checkInternationalPhone is used to verify if the given value is a possible valid international phone number : This function first removes all non-digit characters which are allowed in phone numbers. These delimiters are declared in the lines (found in the beginning of the code) :

var phoneNumberDelimiters = "()- "
var validWorldPhoneChars = phoneNumberDelimiters + "+"

Now that all valid delimiters are removed we just check if the remaining value is an integer and that it has at least a certain number of digits (given by the variable 'minDigitsInIPhoneNumber').
Function ValidateForm is used to make sure that the phone number field is not blank and that it is a valid phone number on form submission