AEM Touch UI phone number validator

aemTouchUIPhoneNumberValidator.js

/**
 * Register phone number validation field looking for format "xxx-xxx-xxxx".
 *
 * The validator keys off of the ".field-phonenumber" selector. To use in Touch
 * UI dialogs, add the class "field-phonenumber" to a textfield.
 *
 * <phonenumber
 *     jcr:primaryType="nt:unstructured"
 *     sling:resourceType="granite/ui/components/foundation/form/textfield"
 *     fieldLabel="Phone Number"
 *     fieldDescription="Format of &quot;xxx-xxx-xxxx&quot;"
 *     class="field-phonenumber"
 *     name="./phonenumber"/>
 *
 * Touch UI dialog rendered HTML:
 *
 * <div class="coral-Form-fieldwrapper">
 *     <label class="coral-Form-fieldlabel">Phone Number</label>
 *     <input class="coral-Form-field coral-Textfield field-phonenumber" type="text" name="./phoneNumber" value="">
 * </div>
 */
$.validator.register({
  selector: '.field-phonenumber',
  validate: function(el) {
    var field,
        value;

    field = el.closest(".coral-Form-field");
    value = el.val();

    if (!/^\d{3}-\d{3}-\d{4}$/.test(value)) {
      return Granite.I18n.get('The field must be a phone number in the format of "xxx-xxx-xxxx"');
    }
  },
  show: function (el, message) {
    var fieldErrorEl,
        field,
        error,
        arrow;

    fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");
    field = el.closest(".coral-Form-field");

    field.attr("aria-invalid", "true")
      .toggleClass("is-invalid", true);

    field.nextAll(".coral-Form-fieldinfo")
      .addClass("u-coral-screenReaderOnly");

    error = field.nextAll(".coral-Form-fielderror");

    if (error.length === 0) {
      arrow = field.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";

      fieldErrorEl
        .attr("data-quicktip-arrow", arrow)
        .attr("data-quicktip-content", message)
        .insertAfter(field);
    } else {
      error.data("quicktipContent", message);
    }
  },
  clear: function (el) {
    var field = el.closest(".coral-Form-field");

    field.removeAttr("aria-invalid").removeClass("is-invalid");

    field.nextAll(".coral-Form-fielderror").tooltip("hide").remove();
    field.nextAll(".coral-Form-fieldinfo").removeClass("u-coral-screenReaderOnly");
  }
});