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.

JavaScript

jQuery(document).ready(function($){
    $cf = $('#customfield_10117');
    $cf.blur(function(e){
        phone = $(this).val();
        phone = phone.replace(/[^0-9]/g,'');
        if (phone.length != 10) {
            e.preventDefault();
            if (confirm('Phone number must include area code and prefix.')) {
                setTimeout(function(){$cf.focus()}, 0);
            }
        } else {
            area = phone.substring(0,3);
            prefix = phone.substring(3,6);
            line = phone.substring(6);
            $(this).val('(' + area + ') ' + prefix + '-' + line);
        }
    });
});