如何在Touch UI中添加必填下拉字段 [英] How add mandatory dropdown field in Touch UI

问题描述

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

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

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

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

如何实现？

推荐答案

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

Use $.validator.register to register custom validators.

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

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

我在GitHub上提供了一个全面的Touch UI验证库，该库修复了您所描述的问题，其中 required属性不适用于多个Granite UI字段以及其他功能。参见 https://github.com/nateyolles/aem-touch-ui-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.

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

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

这篇关于如何在Touch UI中添加必填下拉字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！