CQ:Dialog field - how do I make sure a field is mandatory based on a drop-down selection? | Community
Skip to main content
jayv25585659
Level 8
May 20, 2022
Solved

CQ:Dialog field - how do I make sure a field is mandatory based on a drop-down selection?

  • May 20, 2022
  • 1 reply
  • 690 views

I have a dropdown list with the values yes and no.

 

If I select yes, I show a text field (let's call it year). how can I make sure year is not empty if "Yes" is selected?

 

Can this be done without using  JS? Thanks

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 lukasz-m

Hi @jayv25585659,

It should be possible, to achieve what you need without JS. Below is simple dialog definition that is doing exactly what you have asked.

<cq:dialog jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured" 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">
                    <options jcr:primaryType="nt:unstructured" emptyOption="true" fieldLabel="Build List Using" granite:class="cq-dialog-dropdown-showhide" name="./listFrom" sling:resourceType="granite/ui/components/coral/foundation/form/select">
                        <granite:data jcr:primaryType="nt:unstructured" cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"/>
                        <items jcr:primaryType="nt:unstructured">
                            <yes jcr:primaryType="nt:unstructured" granite:hide="${cqDesign.yes}" text="Yes" value="yes"/>
                            <no jcr:primaryType="nt:unstructured" granite:hide="${cqDesign.no}" text="No" value="no"/>
                        </items>
                    </options>
                    <yesOptions jcr:primaryType="nt:unstructured" granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin" sling:resourceType="granite/ui/components/coral/foundation/container">
                        <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="yes"/>
                        <items jcr:primaryType="nt:unstructured">
                            <year jcr:primaryType="nt:unstructured" fieldLabel="Year" name="./year" required="true" sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
                        </items>
                    </yesOptions>
                </items>
            </column>
        </items>
    </content>
</cq:dialog>

So, what you can expect:

  1. By default empty option is visible (this of course can be changed)
  2. If you choose yes from dropdown year field will appear, it is mandatory so user will need to fill it with data to successfully submit the dialog.
  3. If you switch from yes to no, year field will disappear and even if it was empty it still be possible to submit the dialog.

From more complex scenarios js could be required.

1 reply

lukasz-m
Community Advisor
lukasz-mCommunity AdvisorAccepted solution
Community Advisor
May 20, 2022

Hi @jayv25585659,

It should be possible, to achieve what you need without JS. Below is simple dialog definition that is doing exactly what you have asked.

<cq:dialog jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured" 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">
                    <options jcr:primaryType="nt:unstructured" emptyOption="true" fieldLabel="Build List Using" granite:class="cq-dialog-dropdown-showhide" name="./listFrom" sling:resourceType="granite/ui/components/coral/foundation/form/select">
                        <granite:data jcr:primaryType="nt:unstructured" cq-dialog-dropdown-showhide-target=".list-option-listfrom-showhide-target"/>
                        <items jcr:primaryType="nt:unstructured">
                            <yes jcr:primaryType="nt:unstructured" granite:hide="${cqDesign.yes}" text="Yes" value="yes"/>
                            <no jcr:primaryType="nt:unstructured" granite:hide="${cqDesign.no}" text="No" value="no"/>
                        </items>
                    </options>
                    <yesOptions jcr:primaryType="nt:unstructured" granite:class="hide list-option-listfrom-showhide-target foundation-layout-util-vmargin" sling:resourceType="granite/ui/components/coral/foundation/container">
                        <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="yes"/>
                        <items jcr:primaryType="nt:unstructured">
                            <year jcr:primaryType="nt:unstructured" fieldLabel="Year" name="./year" required="true" sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/>
                        </items>
                    </yesOptions>
                </items>
            </column>
        </items>
    </content>
</cq:dialog>

So, what you can expect:

  1. By default empty option is visible (this of course can be changed)
  2. If you choose yes from dropdown year field will appear, it is mandatory so user will need to fill it with data to successfully submit the dialog.
  3. If you switch from yes to no, year field will disappear and even if it was empty it still be possible to submit the dialog.

From more complex scenarios js could be required.