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!

[Danish Bhairag2]

@mania  i agree with @Bhavya11 here. Create 2 scripts. 1 on change where u can just do the formatting then validation 2. on submit where u can perform validation. 

this will provide seamless experience to end users.

Thanks,

Danish Bhairagdar

[pr8172510]

Hi @mania,

I was able to reproduce the same

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

    // Skip during form load
    if (isLoading) {
        return;
    }

    // If the field is empty, clear any error messages
    if (!newValue || newValue.trim() === '') {
        g_form.hideFieldMsg('employee_phone', true);
        return;
    }

    // Check if the value is already properly formatted
    // If it matches the US format, skip processing
    if (newValue.match(/^\+1 \(\d{3}\) \d{3}-\d{4}$/)) {
        g_form.hideFieldMsg('employee_phone', true);
        return;
    }

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

    // Only process if we have exactly 10 digits
    if (digits.length === 10) {

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

        // Set the formatted value
        g_form.setValue('employee_phone', formatted);
        g_form.hideFieldMsg('employee_phone', true);

    } else if (digits.length > 0 && digits.length < 10) {

        // Show error for incomplete numbers
        g_form.showFieldMsg(
            'employee_phone',
            'Please enter exactly 10 digits.',
            'error'
        );

    } else if (digits.length > 10) {

        // Show error if more than 10 digits
        g_form.showFieldMsg(
            'employee_phone',
            'Please enter exactly 10 digits (no more than 10).',
            'error'
        );
    }
}

If users need to edit the phone number frequently, consider performing the formatting in an onSubmit Catalog Client Script or on the server side after submission, rather than formatting it on every onChange event.