Custom validation for dialog field - Touch UI | Community
Skip to main content
D
demd43642519
Level 4
June 7, 2018
Solved

Custom validation for dialog field - Touch UI

  • June 7, 2018
  • 1 reply
  • 8404 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

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

      }

});

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
June 7, 2018

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

      }

});

Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...