How add mandatory dropdown field in Touch UI

Question

I added "required" as "true" but it is not working. "required" as "true" only works for text field.

As per below document, I do not see any option to add mandatory field from dropdown. http://docs.adobe.com/docs/en/aem/6-0/author/assets/managing-assets-touch-ui/managing-asset-schema-forms.html

How is it possible to achieve this?

Answer 1

AFAIK, In touch ui dialogs you can apply such validation via jquery. One thing you can try. Create a clientlib folder under component with categories cq.authoring.dialog . Then add the below js snippet as per normal process :

(function (document, $, ns) {
    "use strict";

    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var $form = $(this).closest("form.foundation-form"),
            title = $form.find("[name='authoringMode']").val(),
            message, clazz = "coral-Button ";

        if(!title){
            ns.ui.helpers.prompt({
            title: Granite.I18n.get("Invalid Input"),
            message: "Please Check Values",
                actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                }
            ],
            callback: function (actionId) {
                if (actionId === "CANCEL") {
                }
            }
        });
        }else{
                 $form.submit();
        }
    });
})(document, Granite.$, Granite.author);

One thing here you need to change is $form.find("[name='authoringMode']") here name is the property and authoringMode is the value of select box in my dialog. as shown.

Here it will check at dialog submit time whether there is value in drop down and will not let author to submit the dialog till drop-down is blank. Here is the reference. http://experience-aem.blogspot.in/2015/02/aem-6-sp2-touch-ui-dialog-before-submit.html

Answer 2

Use $.validator.register to register custom validators.

I have written a detailed blog post on writing custom validators: http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation.

I have made a comprehensive Touch UI validation library available on GitHub that fixes the issue you described where the "required" property doesn't work for several Granite UI fields as well as other functionality. See https://github.com/nateyolles/aem-touch-ui-validation.

Essentially, you need to modify the field's HTML to include an HTML input that can be validated by either overlaying the foundation component or using JavaScript to modify the DOM when the dialog opens. A hidden input is not eligible for validation, so you need to add a text input hidden by CSS. Use JavaScript to update the "hidden" field when the component action is updated. For example, a color is chosen in the color picker.

Then you register the custom validator against the non-visible text input. Pass in the selector of the non-visible text field and the function that does the actual validation. Also pass in functions for show and clear that show and hide the error message/icon.

The following example is for the color picker taken from the library I linked to above:

/**
 * Validation for Granite Touch UI colorpicker.
 *
 * Additional properties for granite/ui/components/foundation/form/colorpicker
 * are:
 *
 * {Boolean}required
 * Is field required
 * defaults to false
 *
 *  <myColorPicker
 *     jcr:primaryType="nt:unstructured"
 *     sling:resourceType="granite/ui/components/foundation/form/colorpicker"
 *     fieldLabel="My colorpicker"
 *     name="./myColorPicker"
 *     required="{Boolean}true"/>
 */
var COLORPICKER_SELECTOR = '.coral-ColorPicker',

$.validator.register({
    selector: '.marker-colorpicker',
    validate: function(el) {
        var field,
            value,
            required;

        field = el.closest(".coral-Form-field");
        value = el.val();
        required = field.data('required');

        if (required && !value) {
            return Granite.I18n.get('Please fill out this field.');
        } else {
            el.setCustomValidity(null);
            el.updateErrorUI();
        }
    },
    show: function (el, message) {
        var fieldErrorEl,
            field,
            error,
            arrow;

        fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");
        field = el.closest('.coral-Form-field');

        el.add(field)
           .attr('aria-invalid', 'true')
           .toggleClass('is-invalid', true);

       field.nextAll('.coral-Form-fieldinfo')
           .addClass('u-coral-screenReaderOnly');

       error = field.nextAll('.coral-Form-fielderror');

       if (error.length === 0) {
           arrow = field.closest('form').hasClass('coral-Form--vertical') ? 'right' : 'top';
           fieldErrorEl.clone()
              .attr('data-quicktip-arrow', arrow)
              .attr('data-quicktip-content', message)
              .insertAfter(field);
       } else {
           error.data('quicktipContent', message);
       }
   },
   clear: function(el) {
       var field = el.closest('.coral-Form-field');

       el.add(field)
          .removeAttr('aria-invalid')
         .removeClass('is-invalid');

       field.nextAll('.coral-Form-fielderror').tooltip('hide').remove();
       field.nextAll('.coral-Form-fieldinfo').removeClass('u-coral-screenReaderOnly');
    }
});

/**
 * Create hidden field to validate against and click event handler when a
 * Granite UI dialog loads.
 */
 $(document).on('foundation-contentloaded', function(e) {
     var $dialog,
         $radioGroups;

    $dialog = $(e.target);
    $radioGroups = $dialog.find(COLORPICKER_SELECTOR);

    $radioGroups.each(function() {
        var $radioGroup,
            required,
            $marker,
            $button;

        $radioGroup = $(this);
        required = $radioGroup.data('required');

        if (required) {
            $marker = $radioGroup.find('input[type="hidden"]');
            $button = $radioGroup.find('.coral-ColorPicker-button')

            /* Change to text as hidden is not validated */
            $marker.attr('type', 'text');
            $marker.addClass('marker-colorpicker');
            $marker.attr('aria-required', 'true');

            /* revalidate once the button color has changed */
            $button.on('stylechange', function(){
                $marker.trigger('change');
            });
        }
    });
});