Make a user input phone number display as (xxx) xxx-xxxx on entry.

Ask the community
,
9

Hi Anney:
It appears that you have muddled up your function definitions.

You need to declare the formatPhoneNumber function before or after the change function. Then you call it in the change function…

export function input44_change(event) {  
    clearError();
    let number = $w('#phoneNumber').value;
    number = formatPhoneNumber(number);
    if (number) {
        $w('#phoneNumber').value = number;
    }
}

function formatPhoneNumber(phoneNumberString) {
    let result = null;
    var cleaned = phoneNumberString.replace(/\D/g, '');
    if (cleaned.length >= 10 && cleaned.length <= 12) {
        var match = intlMatch(cleaned);
        if (match) {  
            var intlCode = (match[1] ? '+'+match[1]+' ' : '');
            if (! match[1] || match[1] === '1') {
                // US Format
                match = usMatch(match[2]);
                result =  [intlCode, '(', match[1], ') ', match[2], '-', match[3]].join('');
            } else if (match[1] === '44') {
                // UK format
                match = ukMatch(match[2]);
                result =  [intlCode, '(', match[1], ') ', match[2], ' ', match[3]].join('');
            } else {
                // Generic format
                match = genericMatch(match[2]);
                result =  [intlCode, ' ', match[1], '  ', match[2], ' ', match[3], '  ', match[4], ' ', match[5]].join('');
            } 
        }
    } else {
        // Error wrong number of digits should be 10, 11 or 12
        console.log("Badly formatted phone number!");
    }
    return result;
} 

function intlMatch (matchString) {
    return matchString.match(/^(\d{0,2})?(\d{10})$/);
}

function usMatch (matchString) {
    return matchString.match(/^(\d{3})(\d{3})(\d{4})$/);
}

function ukMatch (matchString) {
    return matchString.match(/^(\d{4})(\d{3})(\d{3})$/)
}

function genericMatch (matchString) {
    return matchString.match(/^(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/);
}

The above code should do what you want. Note I have also provided some optional formats for numbers that are not US Format. I have have also added an error console.log for badly formatted phone numbers. This could be written to a text element on screen if you want to. Here is an articvle on formattnig international phone numbers if you are interested.

Cheers
Steve