In AEM 6.2, there is no mandatory validation for dropdowns in dialogs, when having a “Please select” option in place. This is due to a validation check in the out of the box AEM validator which does a check for “value != null”, which is not the case when having a “Please select” option (value would just be a blank String).
There is currently no other option then implementing a custom validation. This requires the following steps:
- Create a new clientlib with the following configuration
<?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="[_]"/>
- Add the following JavaScript to this clientlib. This JS validates all select fields with a specific property set (see step 3)
/** * Fix to allow required select fields. * * Add validation="select.required" to the field configuration * * e.g.: * <selectField * jcr:primaryType="nt:unstructured" * sling:resourceType="granite/ui/components/foundation/form/select" * validation="select.required"> */ (function(window, $) { var SELECT_REQUIRED_VALIDATOR = "select.required", foundationReg = $(window).adaptTo("foundation-registry"); foundationReg.register("foundation.validation.validator", { selector: "select[data-validation='" + SELECT_REQUIRED_VALIDATOR + "'], [data-validation='" + SELECT_REQUIRED_VALIDATOR + "'] select", validate: function(el) { var value = el.value; if (!value || value === '') { return "Please fill out this field." } } }); })(window, jQuery);
- To mark select fields as required (and enable this validation), put the property validation=”select.required” on it:
<selectField jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" name="./mySelectField" validation="select.required"> ... </selectField>