Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Custom Validation on multifield Touch UI

Avatar

Level 2

Hi All,

I have written custom validation on multifield and have registered validator for the same, my validations are working fine while interacting with the fields (textfield and pathbrowser) but on click of "Add Field" button my validator is not getting invoked so author is allowed to submit blank fields in the dialog but is getting restricted only while interacting with the fields. Can you please help how can I bind my validator to the addfield button?

Here is my dialog xml and validation Js:-

Dialog.xml

*********************************************************************************************************************

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:rep="internal"

    jcr:mixinTypes="[rep:AccessControllable]"

    jcr:primaryType="nt:unstructured"

    jcr:title="Global Header"

    sling:resourceType="cq/gui/components/authoring/dialog">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container"

        class="cws-coral-lager-column">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>

        <items jcr:primaryType="nt:unstructured">

            <column

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/foundation/container">

                <items jcr:primaryType="nt:unstructured">

                    <multilist

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Login Links"

                        sling:resourceType="granite/ui/components/foundation/section">

                        <layout

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                            margin="{Boolean}false"

                            method="absolute"/>

                        <items jcr:primaryType="nt:unstructured">

                            <column

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/container">

                                <items jcr:primaryType="nt:unstructured">

                                    <list

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/foundation/form/multifield"

                                        class="foundation-layout-util-maximized-alt">

                                        <field

                                            jcr:primaryType="nt:unstructured"

                                            sling:resourceType="granite/ui/components/foundation/form/fieldset"

                                            acs-commons-nested="JSON_STORE"

                                            name="./field">

                                            <layout

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                                                method="absolute"/>

                                            <items jcr:primaryType="nt:unstructured">

                                                <column

                                                    jcr:primaryType="nt:unstructured"

                                                    sling:resourceType="granite/ui/components/foundation/container">

                                                    <items jcr:primaryType="nt:unstructured">

                                                        <title

                                                            jcr:primaryType="nt:unstructured"

                                                            sling:resourceType="granite/ui/components/foundation/form/textfield"

                                                            class="field-alphanumeric custom-required"

                                                            fieldLabel="Title *"

                                                            name="./title"

                                                            validation="validation.requiredfield"/>

                                                        <link

                                                            jcr:primaryType="nt:unstructured"

                                                            sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                                            class="custom-required"

                                                            fieldLabel="Link"

                                                            name="./link"

                                                            validation="validation.requiredfield"/>

                                                        <linkTarget

                                                            jcr:primaryType="nt:unstructured"

                                                            sling:resourceType="granite/ui/components/foundation/form/checkbox"

                                                            fieldDescription="Please check for opening the link in same window."

                                                            name="./linkTarget"

                                                            text="Want to open link in same window?"

                                                            uncheckedValue="false"

                                                            value="_self"/>

                                                    </items>

                                                </column>

                                            </items>

                                        </field>

                                    </list>

                                </items>

                            </column>

                        </items>

                    </multilist>

                </items>

            </column>

        </items>

    </content>

</jcr:root>

*********************************************************************************************************************

validation Js:-

**************************************************************************************************************

(function() {

     var REGEX_SELECTOR = "validation.requiredfield";

     var fieldErrorEl = $("<span style='color:red' class='span-multifield-error'/>"),

         cmf = this,

      selector = "[data-validation='" + REGEX_SELECTOR + "']";

    $.validator.register({

         selector: selector,

         validate: validate

     });

     function validate($el) {

         var $multifield = $el.closest(".coral-Multifield"),

             $inputs = $multifield.find("input, textarea"),

             $input, isRequired, isAlphaNumeric, message = null;

         var regexAlphaNum = /^[A-Za-z0-9 ]+$/;

         $inputs.each(function(index, input) {

             $input = $(input);

             isRequired = $input.hasClass("custom-required") || $input.parents(':eq(1)').hasClass("custom-required");

             isAlphaNumeric = $input.hasClass("field-alphanumeric");

             if (isRequired && $input.val().length === 0) {

                 $input.addClass("is-invalid");

                 message = "Please fill the required multifield items";

                 var $errorSpan = $input.closest('div.coral-Form-fieldwrapper').children('span.span-multifield-error');

                 console.log($multifield);

                 $errorSpan.remove();

                 var $labelElement = $input.closest('div.coral-Form-fieldwrapper').children('label.coral-Form-fieldlabel');

                 fieldErrorEl.clone().text(message).insertAfter($labelElement);

             } else if (isAlphaNumeric && !regexAlphaNum.test($input.val())) {

                 $input.addClass("is-invalid");

                 message = "Please fill the alphanumeric";

                 var $errorSpan = $input.closest('div.coral-Form-fieldwrapper').children('span.span-multifield-error');

                 console.log($multifield);

                 $errorSpan.remove();

                 var $labelElement = $input.closest('div.coral-Form-fieldwrapper').children('label.coral-Form-fieldlabel');

                 fieldErrorEl.clone().text(message).insertAfter($labelElement);

             } else {

                 $input.removeClass("is-invalid");

                 var $errorSpan = $input.closest('div.coral-Form-fieldwrapper').children('span.span-multifield-error')

                 console.log($multifield);

                 $errorSpan.remove();

             }

         });

         if (message) {

             $(".cq-dialog-submit").attr("disabled", "disabled");

         } else {

             $(".cq-dialog-submit").removeAttr("disabled");

         }

         return message;

     }

     validate($($(selector)[0]));

})();

**************************************************************************************************************

I have set categories to clientlib as cq.authoring.dialog.

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi Rohit,

You have to handle validations either on dialog submit/add fields in multifield  as below-

     below function calls on submit click

$(document).on("click", ".cq-dialog-submit", function (e) {

        //write code to show validation error

    });

below function calls on add field click

$(document).on("click", "Add Field Button Class", function (e) {

        //write code to show validation error

    });

Adobe Experience Manager Help | Using Event Handlers in Adobe Experience Manager Touch UI Components

Hope this helps you

Thanks,

Manjunath DJ

View solution in original post

2 Replies

Avatar

Correct answer by
Level 2

Hi Rohit,

You have to handle validations either on dialog submit/add fields in multifield  as below-

     below function calls on submit click

$(document).on("click", ".cq-dialog-submit", function (e) {

        //write code to show validation error

    });

below function calls on add field click

$(document).on("click", "Add Field Button Class", function (e) {

        //write code to show validation error

    });

Adobe Experience Manager Help | Using Event Handlers in Adobe Experience Manager Touch UI Components

Hope this helps you

Thanks,

Manjunath DJ