Question

我将“required”添加为“true”但不起作用。 “required”as“true”仅适用于文本字段。

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

如何实现这一目标？

Answer 1

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

我写了一篇关于编写自定义验证器的详细博文：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。

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

然后根据不可见的文本输入注册自定义验证器。传入不可见文本字段的选择器和执行实际验证的函数。还传递show和clear功能，显示和隐藏错误信息/图标。

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

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

Answer 2

AFAIK，在触摸ui对话框中，您可以通过jquery应用此类验证。你可以尝试一件事。在具有类别cq.authoring.dialog的组件下创建clientlib文件夹。然后按照正常流程添加以下js片段：

(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);

您需要更改的一件事是$form.find("[name='authoringMode']")这里name是属性，authoringMode是我的对话框中select框的值。如图所示。 enter image description here

这里将在对话框提交时检查下拉列表中是否有值，并且在下拉列表为空白之前不允许作者提交对话框。 enter image description here 这是参考。 http://experience-aem.blogspot.in/2015/02/aem-6-sp2-touch-ui-dialog-before-submit.html

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

2 个答案: