Javascript Phone Number Validation

• Phone No. Validation Tutorial
  • Javascript Phone No. Validation

    International Phone Number Validation in Forms

    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 validate an International Phone number in your forms using Javascript.

    International Phone Number Format

    Most telephone networks nowadays are interconnected in the international telephone network, where the format of telephone numbers is standardized by ITU-T in the recommendation E.164, which specifies that the entire number should be 15 digits or shorter, and begin with a country prefix followed by an area code or city code and the subscriber number, which might consist of the code for a particular telephone exchange. In writing an international telephone number should start with a plus sign ("+") and the country code.the The "+" stands for the international call prefix chosen by the country the call is being made from. The general standard is 00 and this has been implemented by a large number of countries. For North American Numbering Plan (NANP) countries (including the United States and Canada) the call prefix is "011" for other countries and "1" for countries inside the NANP. Click here for NANP phone number validation and US only phone number validation.

    Example

    Example of Phone Validation

    
    

    Enter a Phone Number :
    
    

    Example

    • Valid Phone numbers:0044-1293-451996
    • Invalid Phone numbers:0044-1293

    View Explanation of the Code

    Cut and Paste Code

    Cut 'n' paste code for the above Example

    JavaScript Code

    <script language = "Javascript"> /** * DHTML phone number validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/) */ // 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 trim(s) { var i; var returnString = ""; // Search through string's characters one by one. // If character is not a whitespace, append to returnString. for (i = 0; i < s.length; i++) { // Check that current character isn't whitespace. var c = s.charAt(i); if (c != " ") returnString += c; } return returnString; } 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){ var bracket=3 strPhone=trim(strPhone) if(strPhone.indexOf("+")>1) return false if(strPhone.indexOf("-")!=-1)bracket=bracket+1 if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)return false var brchr=strPhone.indexOf("(") if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")return false if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)return false 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

    <form name="frmSample" method="post" action="#" onSubmit="return ValidateForm()"> <p>Enter a phone number : <input type="text" name="txtPhone"> </p> <p> <input type="submit" name="Submit" value="Submit"> </p> </form>

    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

Please like, +1, link to and share this SmartWebby resource if you found it helpful. Thanks for your encouragement!