Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Custom validation for dialog field - Touch UI

demd43642519
Level 4
Level 4

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.

1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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

      }

});

View solution in original post

0 Replies
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

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

      }

});

View solution in original post