• Home
  • Culture
  • Offices
  • Jobs
  • Blog
  • Contact
  • Home
  • Culture
  • Offices
  • Jobs
  • Blog
  • Contact

AEM TouchUI dropdown mandatory validation

  • Christoph Thommen
  • 02.11.2019
AEM Touch UI

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>

     

Search

Latest Post

Virtual art night with the team

Codeflair has a new inspiring home in Skopje

AEM TouchUI dropdown mandatory validation

Right-To-Left Keyboard Switch for Granite / Touch UI

TouchUI Page Properties encoding issue with AEM 6.2 CFP3

Contact & Legal Info

codeflair AG

Dornacherstrasse 230

CH-4053 Basel

+41 79 519 76 31

contact@codeflair.ch

We are Hiring!
  • Are you a seriously good Java developer or architect, ideally with CQ/AEM knowhow? Do you even know AngularJS and the ionic framework?

See our open positions here

Related Articles

Here, you can find interesting bits and pieces we find in our work and about codeflair itself.

Virtual art night with the team

Rade Georgiev June 4, 2020

Amongst our partners and clients, Codeflair is famous for delivering creative IT solutions with the highest quality every time. But we thrive to keep the creativity alive not just in

codeflair office space

Codeflair has a new inspiring home in Skopje

Rade Georgiev March 4, 2020

Last week we celebrated another milestone. Codeflair has a new inspiring home in Skopje. Quality work and the best team that we have needed a matching space and atmosphere that

AEM Touch UI

AEM TouchUI dropdown mandatory validation

Christoph Thommen November 2, 2019

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

Codeflair AG is a registered Swiss stock company with its headquarter in Basel and a subsidiary in Skopje, North Macedonia.

The main focus of the company is to provide high quality software services in the enterprise market using CMS software like Adobe Experience Manger (AEM), Sitecore or micro service-based portals in combination with latest frontend technologies.

Instagram

Copyright © 2020. All rights reserved.

Impressum & Privacy Policy

CONTACT & LEGAL INFO

codeflair AG

Dornacherstrasse 230
CH-4053 Basel

+41 79 519 76 31

contact@codeflair.ch

QUICK LINKS
  • Homepage
  • Our Culture
  • Offices
  • Jobs
  • Blog
Menu
  • Homepage
  • Our Culture
  • Offices
  • Jobs
  • Blog