Custom validation for dialog field - Touch UI

[demd43642519]

Hi guys,

I'm willing to set a custom validation rule for a text field on my component's dialog. And for that i was following this guide:

Adobe Experience Manager Help | Validating Adobe Experience Manager Touch UI dialog values

For some unknown reason this doesn't work for me. There are any additional steps that are omitted in the guide ?

Things I made:

clientlib folder under the component node.

added category property to it.

add a js.txt and a validation.js

changed the name accordingly to my dialog.

I guess I have to include my js into the page somehow ? It's that correct ?
but every time I use <sly data-sly-call="${clientlib.js @ categories='myCateogry'}" /> i get this :

org.apache.sling.api.scripting.ScriptEvaluationException: org.apache.sling.scripting.sightly.SightlyException: data-sly-call: expression evaluates to null.

My textfield uses granite/ui/components/coral/foundation/form/textfield as resourceType.

[arunpatidar · Accepted solution]

Hi,

You need to create your js clientLibs as cq.authoring.dialog category, then only it would be triggered when you open dialog.

No need to call in your page components.

sample code.

/*Phone Number validation*/

$.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'>Phone Number Error</span>");

        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");

      }

});