如何在 Touch UI 中添加强制下拉字段

我将“必需”添加为“真实”，但它不起作用。 “required”为“true”仅适用于文本字段。

根据下面的文档，我没有看到任何从下拉列表中添加必填字段的选项。http://docs.adobe.com/docs/en/aem/6-0/author/assets/managing-assets-touch-ui/managing-asset-schema-forms.html

怎么可能做到这一点呢？

使用 $.validator.register 注册自定义验证器。

我写了一篇关于编写自定义验证器的详细博客文章：http://www.nateyolles.com/blog/2016/02/aem-touch-ui-custom-validation.

我在 GitHub 上提供了一个全面的 Touch UI 验证库，它修复了您所描述的问题，其中“必需”属性不适用于多个 Granite UI 字段以及其他功能。看https://github.com/nateyolles/aem-touch-ui-validation.

本质上，您需要修改字段的 HTML 以包含 HTML 输入，该输入可以通过覆盖基础组件或在对话框打开时使用 JavaScript 修改 DOM 来验证。隐藏的输入不符合验证条件，因此您需要添加由 CSS 隐藏的文本输入。当组件操作更新时，使用 JavaScript 更新“隐藏”字段。例如，在颜色选择器中选择颜色。

然后，您针对不可见的文本输入注册自定义验证器。传入不可见文本字段的选择器和执行实际验证的函数。还传入用于显示和清除的函数，以显示和隐藏错误消息/图标。

以下示例适用于从我上面链接到的库中获取的颜色选择器：

/**
 * 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');
            });
        }
    });
});