Issue with US Phone Number Formatting in Record Producer (onChange Client Script)

[mania]

Hi,

I have a Phone Number variable in a Record Producer. My requirement is to automatically format the entered phone number into the US format:

+1 (XXX) XXX-XXXX

I wrote the following onChange Client Script:

// Remove all non-digit characters
var digits = newValue.replace(/\D/g, '');

// If only 10 digits are entered, assume US number
if (digits.length == 10) {

    var formatted = '+1 (' +
        digits.substring(0, 3) + ') ' +
        digits.substring(3, 6) + '-' +
        digits.substring(6);

    g_form.setValue('u_employee_aided_contact_telephone_number', formatted);
    g_form.hideFieldMsg('u_employee_aided_contact_telephone_number', true);

} else if (digits.length > 0) {

    g_form.showFieldMsg(
        'u_employee_aided_contact_telephone_number',
        'Please enter exactly 10 digits.',
        'error'
    );
}

The script successfully:

• Validates that the phone number contains exactly 10 digits.
• Automatically formats it as +1 (XXX) XXX-XXXX.
• Displays an error message when the input is invalid.

Issue I'm facing:

Once the number is formatted, editing it becomes difficult.

For example:

1. I enter a 10-digit number.
2. I realize that the 2nd and 3rd digits are incorrect.
3. I delete those two digits and try to enter the correct digits.
4. The field does not allow me to type the new digits.

Similarly, if I delete any digit from the middle of the formatted phone number and try to enter a replacement, the input is not accepted.

It seems that after g_form.setValue() formats the value, the field becomes difficult to edit because the onChange script keeps re-triggering.

Has anyone encountered this issue before? What is the recommended approach to allow users to edit the formatted phone number while still enforcing the US phone number format?

Any suggestions or best practices would be appreciated.

Thank you!

[Tanushree Maiti]

Hi @mania 

Try with these 2 regex:

1) 

\(?\\d{3}[-.)]\\d{3}[-.]\\d{4}

This RegEx is used to match and validate US phone numbers in the following formats:

• (XXX) XXX-XXXX
• XXX-XXX-XXXX
• XXX.XXX.XXXX

2) 

^\(?([0-9]{3})\)?[-]([0-9]{3})[-]([0-9]{4})$

[Tanushree Maiti]

Hi @mania 

Sample code:

function onChange(control, oldValue, newValue, isLoading) {
if(isLoading || newValue == ''){
return;
}
// Allows formats of (999) 999-9999, 999-999-9999, and 9999999999
var numberFormat = /^[(]?(\d{3})[)]?[-|\s]?(\d{3})[-|\s]?(\d{4})$/;
if(!numberFormat.test(newValue)){
alert('Enter a valid phone number');
g_form.setValue('u_phone_number', '');
}
}

[yashkamde]

Hello @mania ,

I would recommend that do validation only, no reformatting first :

On change client script :

var digits = newValue.replace(/\D/g, '');

    if (digits.length === 10) {
        g_form.hideFieldMsg(field, true);
    } else {
        g_form.showFieldMsg(field, 'Please enter exactly 10 digits.', 'error');
    }

Then add onLoad Client Script that does the actual formatting once:

function onLoad() {
    var field = 'u_employee_aided_contact_telephone_number';
    var el = g_form.getControl(field);

    if (!el) return;
    var inputEl = el.jquery ? el[0] : el;

    inputEl.addEventListener('blur', function () {
        formatPhone(field);
    });
}

function formatPhone(field) {
    var value = g_form.getValue(field);
    var digits = value.replace(/\D/g, '');

    if (digits.length === 10) {
        var formatted = '+1 (' +
            digits.substring(0, 3) + ') ' +
            digits.substring(3, 6) + '-' +
            digits.substring(6);

        g_form.setValue(field, formatted);
        g_form.hideFieldMsg(field, true);
    } else if (digits.length > 0) {
        g_form.showFieldMsg(field, 'Please enter exactly 10 digits.', 'error');
    }
}

If my response helped mark as helpful and accept the solution.

[Bhavya11]

Hi @mania ,

Yes you correct the problem is that g_form.setValue() inside the onChange () script triggers the onChange  event again  when your editing the variable, the script re-running and rewriting the variable value.

i would suggest

Validate the onChange ()script but format on onSubmit() so that given  best balance between usability  and data quality. The user can edit any digit freely.