validation selector not defined

[brolinuk]

Hi,

I am writing a new clientlib to validate my customised field on page properties, which is defined below. 

<field
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/foundation/form/select"
   fieldLabel="Offer Type"
   cq:showOnCreate="{Boolean}true"
   name="./offerType"
   validation="select.required"
   class="offer-field">

My validation js below will be called when the page for create/update is loaded.  However, it never run into the function defined for validate and the error message shows that selector is not defined. I am not sure what have been done wrong here. Is it because the page not rendered yet when the js being called (The page shows blank when debug point hit the js). Please advise. Thanks

(function(window, $) {

  var SELECT_REQUIRED_VALIDATOR = "select.required",

    foundationReg = $(window).adaptTo("foundation-registry");

  foundationReg.register("foundation.validation.validator", {

    selector: "[data-validation='select.required']",

    validate: function(el) {

        console.debug("validating")

    }

  });

})(window, jQuery);

[brolinuk]

PS. when I click the save button, it never run into this validate function neither. (I thought the function should be called only when save button clicked though)

[smacdonald2008]

Are you following any Adobe documentation for this use case?

[brolinuk]

Yes, I was following these two posts. Thanks

AEM Touch UI Dialog Validation New Best Practice: Use Foundation-Validation – Adobe

https://www.codeflair.ch/page/aem/aem-touchui-dropdown-mandatory-validation/

[Vijayalakshmi_S]

HI,

Try the below:

• Try printing an alert, one inside function and one side validate function.
• Clientlibs folder with category "cq.authoring.dialog" and JS file having the snippet you shared (anonymous function) with js.txt defining this JS file name
  • alert statement inside the function will get called on page load in edit mode.
  • alert inside validate function will be called on close of dialog (where you have used select field) -> foundation validation happens/listens to dialog submit event (tick symbol)
• Last Option: Ideally, for select fields, we can directly use the selector inside foundation.validation.validator. Just that you say selector is not defined is the error you observe, try registering the selector with foundation.validation.selector before "validate" function as below
  

  foundationReg.register("foundation.validation.selector", {

        submittable : "[data-validation=select.required",

        candidate : "[data-validation=select.required]:not([disabled]):not([readonly])",

        exclusion : "[data-validation=select.required] *"

});

foundationReg.register("foundation.validation.validator",{

.....

});

[brolinuk]

Hi, this is not a dialog, but the property fields when create a new page.

I think the problem is this js is called before the page render completed (I can only see content in the header tag), therefore anything you set for selector will be "not defined". Please let me know if I understand this wrongly.

(function(window, $) {

     ...

  });

})(window, jQuery);

BTW, this is my .content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
   jcr:primaryType="cq:ClientLibraryFolder"
   categories="[cq.authoring.dialog]"
   dependencies="[_]"/>

I have found an alternative way to do the job using jquery onclick function, which is only called when document ready and will do the validate when save button clicked. However, I really would like to understand the AEM recommend solution. Thanks

[Vijayalakshmi_S · Accepted solution]

Hi,

Please find my comments inline in italics.

Hi, this is not a dialog, but the property fields when create a new page. -

[Viji:]properties that we see when we "create a page" or open "View properties" after page creation is nothing but the dialog of Page component.

(certain tabs will not be available on "page create" based on cq:showOnCreate /cq:showOnEdit property on fields/tabs)

I think the problem is this js is called before the page render completed (I can only see content in the header tag), therefore anything you set for selector will be "not defined". Please let me know if I understand this wrongly. -

[Viji:]The reason why this JS was not called is because of the category with respect to page component dialog. This would have called correctly when you open "View properties" of the already created page. For new "page create", we have another clientlibs category related to validation - cq.sites.validations. Try using this and see if it gets called.

(i tried this is in my local and it works)

I have found an alternative way to do the job using jquery onclick function, which is only called when document ready and will do the validate when save button clicked. However, I really would like to understand the AEM recommend solution. 

[Viji:] foundation validation is recommended with respect to Validation.(The one you shared in your original post). Handling validations via touch UI events is available below- (like dialog-ready, dialog-success)

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

Further insights related to recommended approach, would request Adobe team to share inputs.