Format String Field to phone Number Format

nrd5830
Mega Guru

I have a free form string field 'em_contact_info' on the catalog request form. In my 'onChange' client script what I am trying to do is to restrict the field to accept not more than 10 characters, numbers only, remove any special characters and mask the final output to (xxx) xxx-xxxx. Please find below my onChnage client script, please suggest me what needs to be modified, the logic where "Allows formats of (999) 999-9999, 999-999-9999, and 9999999999" can be skipped as we are trying to output the final result to (xxx) xxx-xxxx. The validation is done on portal form.

Type: onChnage

Variable name: eme_contact_info

function onChange(control, oldValue, newValue, isLoading) {
if(isLoading || newValue == ''){
return;
}
// Allows formats of (999) 999-9999, 999-999-9999, and 9999999999
var phoneNumber = g_form.getValue('eme_contact_info');
var pattern = /^[(]?(\d{3})[)]?[-|\s]?(\d{3})[-|\s]?(\d{4})$/;
var digitOnlyRE = /\D/g;
var phoneNumberClean = phoneNumber.replace(digitOnlyRE, ''); // strip non-digit characters
//var pattern = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;
if(!pattern.test(newValue)){
g_form.addInfoMessage('Phone enter a valid phone number');
//g_form.setValue('eme_contact_info', '');
g_form.clearValue('eme_conctact_info');
} else if(pattern.test(newValue)){
// strip leading 1 if it exists
if (phoneNumberClean.length == 11 && phoneNumberClean[0] == '1'){
phoneNumberClean = phoneNumberClean.substring(1);
}
// put into final format
var phoneNumberFormatted = "(" + phoneNumberClean.substring(0,3) + ") " + phoneNumberClean.substring(3,6) + "-" + phoneNumberClean.substring(6);

}
}

1 ACCEPTED SOLUTION

nrd5830
Mega Guru

Narendra,

I tried below onChange script, it worked,

 

function onChange(control, oldValue, newValue, isLoading) {


if(isLoading || newValue == ''){


return;


}
var pattern = /^\(\d{3}\)\s\d{3}-\d{4}$/; //(xxx) xxx-xxxx


var phone = g_form.getValue('emer_contact');


if(!pattern.test(phone)){


phone = phone.replace(/\D/g,'');


var regex = /^\d{10}$/;


var is_valid = regex.test(phone);


if(!is_valid){


g_form.addInfoMessage('Invalid phone number. Please enter 10 digits');


g_form.clearValue('emer_contact');


}else{


phone = '(' + phone.slice(0,3) + ') ' + phone.slice(3,6)+'-' + phone.slice(6,10);


g_form.setValue('emer_contact', phone);


}


}


}

View solution in original post

5 REPLIES 5

Narendra, I tried the code from the article, it's not working.

nrd5830
Mega Guru

Narendra,

I tried below onChange script, it worked,

 

function onChange(control, oldValue, newValue, isLoading) {


if(isLoading || newValue == ''){


return;


}
var pattern = /^\(\d{3}\)\s\d{3}-\d{4}$/; //(xxx) xxx-xxxx


var phone = g_form.getValue('emer_contact');


if(!pattern.test(phone)){


phone = phone.replace(/\D/g,'');


var regex = /^\d{10}$/;


var is_valid = regex.test(phone);


if(!is_valid){


g_form.addInfoMessage('Invalid phone number. Please enter 10 digits');


g_form.clearValue('emer_contact');


}else{


phone = '(' + phone.slice(0,3) + ') ' + phone.slice(3,6)+'-' + phone.slice(6,10);


g_form.setValue('emer_contact', phone);


}


}


}

This worked well for me! Thank you very much for coming back and adding what you did!  Makes community better!