JSFiddle - React, Tailwind, and code Playground

by userdude

HTML

<div class="field-group">
 <label for="customfield_10117">Contact Phone</label>
 <input class="textfield text long-field" id="customfield_10117" name="customfield_10117" maxlength="254" type="text" value="" />
 <div class="description">Requires an area code, prefix and line number. 
</div>

JavaScript

jQuery(document).ready(function($){
    $cf = $('#customfield_10117');
    $cf.blur(function(e){
        number = phoneCheckAndFormat(this.value, 11);
        if (number === false) {
            alert('Entered phone number is not correct.');
            return;
        }
        $(this).val(number);
    });
});

function phoneCheckAndFormat(phone, digits) {
    phone = phone.replace(/[^0-9]/g,'');
    digits = (digits > 0 ? digits : 10);
    if (phone.length != digits) {
        return false;
    } else {
        code = '';
        if (digits == 11) {
            code = '1 ';
            phone = phone.substring(1);
        }
        area = phone.substring(0,3);
        prefix = phone.substring(3,6);
        line = phone.substring(6);
        return code + '(' + area + ') ' + prefix + '-' + line;
    }
}