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

[jayv25585659]

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

[lukasz-m · Accepted solution]

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.