Validation Touch UI dialog does not work when creating a page

[anjabed]

Hi, 

I have a page with multiple properties. I added some validations (for example that the date should be in the future or a text field has to be only 50 long) and all works fine except one.

I want that a text field ("name = ./ABC") is „required“ if a checkbox (name = ./def) is „checked“.

The data-foundation-validation „xyz“ I added to the text field ("name = ./ABC").

This works fine when changing page properties on an excisting page. But it needs to click sometimes the „save“ button to refresh it that the „required“ will be deleted.

My problem ist hat it does not when I creating the page.

The problem is this part in the validation.js.

„$(window).adaptTo('foundation-registry').register('foundation.validation.validator', {

            selector: '[data-foundation-validation~="xyz"]',

            validate: function (el)“

It will not be called when I check or uncheck the checkbox when creating a new page. When changing existing page properties it will be called and works.

Perhaps someone can help me!

Here the complete validation.js

(function(window, document, Granite, $) {

    "use strict";

      function initValidation() {

        console.log("initValidation"); // is allways called

        $(window).adaptTo('foundation-registry').register('foundation.validation.validator', {

            selector: '[data-foundation-validation~="xyz"]',

            validate: function (el) {

                //check if ./def is checked

                var def= $('input[name="./def"]:checked').val();

                console.log ("2: " + def);

                if (def){

                    el.setAttribute("required", "true");

                    console.log ("2: true");

                }else{

                    el.removeAttribute("required")

                    console.log ("2: false");

                }

             }

        })

    }

     $(document).on('change', function(){

        console.log("Change");

        initValidation();

    })

})(window, document, Granite, Granite.$);

[MukeshYadav_]

Hi @anjabed ,

We can init code on page ready and document change applied onward

 const isPageCreation = () => {
        return window.location.href.includes('createpagewizard.html');
    }
    //Execute the init function, compatible with existing page or new page creation
    if (document.readyState === "complete" && isPageCreation()) {
        $(document).on("foundation-contentloaded", function (e) {
            init();
        });
    } else {
        window.addEventListener('load', init);
    }

Thanks

[anjabed]

Sorry, I added this an added some console.log but the new code is never be called.

The problem is not that the initValitation will not be called when creating a new page. I have mutliple times the console.log "initValidation" but just once the console logs of the part

$(window).adaptTo('foundation-registry').register('foundation.validation.validator',...

The Checkbox is checked when creating a new page and the "required" on the text box is working but if I uncheck the Checkbox the "reuired" for the text box will not be removed because the part where it will be removed (above) is not called. I think because it is not valid...

[anjabed]

I meen:

I got the information if the checkbox is checked or not but I cannot reach the text box because I do not enter the 

$(window).adaptTo('foundation-registry').register('foundation.validation.validator',...

part in the js and outside the 

$(window).adaptTo('foundation-registry').register('foundation.validation.validator',...

I cannot reach the text box. I do not know how.

[Mahedi_Sabuj]

You may have loaded your client libraries using extraClientlibs, which causes them to load only on the edit page. To ensure they load when creating a page, use includeClientlibs instead.

<basic jcr:primaryType="nt:unstructured"
  jcr:title="Basic"
  sling:resourceSuperType="wcm/foundation/components/basicpage/v1/basicpage/tabs/basic"
  sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
  <items jcr:primaryType="nt:unstructured">
    <column jcr:primaryType="nt:unstructured"
      sling:resourceType="granite/ui/components/coral/foundation/container">
      <items jcr:primaryType="nt:unstructured">
        <clientLibs jcr:primaryType="nt:unstructured"
          categories="aem-demo.tab.showHide" <!-- load both js and css -->
          js="aem-demo.dropdown.showHide" <!-- load js only -->
          css="aem-demo.dialogHeight" <!-- load css only -->
          sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"/>
      </items>
    </column>
  </items>
</basic>

Reference: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

[anjabed]

The client libraries are loaded.

Anyway I tried it but it does not work.

The problem is not that the clientlibs are not loaded. I see my console logs! And I also see that check and uncheck of the checkbox works but I cannot reach the "required" of the text field because I do not know how!

[narendiran_ravi]

Can you try applying the validator on the checkbox instead of the text field

[anjabed]

Yes I can but it does not make sense. The checkbox is not the field I want to be required or not. Or can you tell me how I can  reach the text field and make it required if I am in the checkbox-element with the validation?

[anjabed]

I find something similar (Gelöst: Making a dialog field mandatory only when visible - Adobe Experience League Community - 3995... but not the "correct answer" the last post!

But I do not have a Dropdown list and my dialog has no data... It is just one element with properties.

Perhaps someone can help me to adapt it to my dialog?
I will try it myself but some hints will be good.

[anjabed · Accepted solution]

Found something.

(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
		console.log("contentload");
       	console.log("contentload - each cq-dialog-checkbox-showhide");
        showHide($(this));
    });

    //when checkbox clicked 
    //This does not work. Can someone help me what do do, that is just work when thin checkbox is changed an not every Check starts it?
    //$(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
    $(document).on("change", function(e) {
        console.log("checkbox clicked");
        showHide($(this));
    });


    function showHide($el){
		console.log("showHide");
        var shouldShowWhenChecked = $('input[name="./checkbox"]:checked').val();
		console.log("shouldShowWhenChecked " + shouldShowWhenChecked);
		if(shouldShowWhenChecked)
        {
            $('input[name="./textfeld"]').prop('required',true);
        }
        else
        {
            $('input[name="./textfeld"]').prop('required',false);
        }
    }
})(document,Granite.$);

But now I have two problems:
1. the change I cannot restrict to the one checkbox it always starts when changes on the site are made

2. The "required" for the textfield is set. But the create Button is always gray and cannot be used however the textfield is set to required or not. If I enter something the "create Button" turn blue and I can save it however the textfield is required or not and however the textfield is filled or not. No validation is made!

[kautuk_sahni]

@anjabed Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

[anjabed]

No, I need more information. 

The code just fixed the required problem but occures a new one:

1. the reaction when page is changed I cannot restrict to the one checkbox it always starts when changes on the site are made

2. The "required" for the textfield is set. But the create Button is always gray and cannot be used however the textfield is set to required or not. If I enter something the "create Button" turn blue and I can save it however the textfield is required or not and however the textfield is filled or not. No validation is made!

[anjabed]

Decided to make a new one for the "new" problem.