Validating Phone Numbers in ShopSite

I was recently asked how to insure that phone numbers entered on the ShopSite Billing/Shipping screen have at least 10 digits. People enter phone numbers many different ways using spaces, dashes, parenthesis, periods, etc. I validate phone numbers by removing all non-numeric characters and checking the remaining digits.

The following JavaScript snippet will work with a ShopSite v10 store. It will test for a minimum of 10 digits and allow up to 20 digits ignoring all other characters. If you don’t want to allow extra digits in the phone replace {10,20} with the number of digits allowed, e.g. {10} will only allow 10 digits after the other characters are removed.

var phonePattern = /^\d{10,20}$/;
var phStr = document.billing.Phone.value;
phStr = phStr.replace(/[^0-9]/g, "");
if (!phStr.match(phonePattern)) {
   error += "Billing Phone Number is not valid\n";
}
if ((document.billing.usebilling != undefined) &&(document.billing.usebilling.checked == false)) {
   var phStr = document.billing.ShipPhone.value;
   phStr = phStr.replace(/[^0-9]/g, "");
   if (!phStr.match(phonePattern)) {
      error += "Shipping Phone Number is not valid\n";
   }
}

The snippet works in conjunction with the CheckIt function. In the back office screen, click Commerce Setup -> Order System -> Checkout and scroll down to the setting called “Javascript added at start of built-in CheckIt function:”. The snippet can typed into the setting if it’s empty. If the setting has existing code add the snippet at the bottom (do not replace existing code in the setting).

Test the snippet after adding it to insure that it doesn’t conflict with other JavaScript that your site uses and to make sure your shoppers can complete their orders. (The snippet will not work if your ShopSite is older than v10.)

Tagged as: CheckIt, checkout, javascript, ShopSite