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 then 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>