validation selector not defined | Community
Skip to main content
B
brolinuk
Level 2
April 26, 2018
Solved

validation selector not defined

  • April 26, 2018
  • 6 replies
  • 6936 views

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

    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 Vijayalakshmi_S

    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.

    6 replies

    B
    brolinukAuthor
    Level 2
    April 26, 2018

    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
    smacdonald2008
    Level 10
    April 26, 2018

    Are you following any Adobe documentation for this use case?

    Vijayalakshmi_S
    Vijayalakshmi_S
    Level 10
    April 26, 2018

    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",{

    .....

    });

    B
    brolinukAuthor
    Level 2
    April 27, 2018

    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
    Vijayalakshmi_SAccepted solution
    Level 10
    April 27, 2018

    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.

      Terms & ConditionsAccessibility statement

      Loading footer...