AEM TouchUI dropdown mandatory validation

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 than implementing a custom validation. This requires the following steps:

1. 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="[_]"/>

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

3. 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>