Question

我在对话框，图片字段和图片替代文字字段中有两个字段。我的要求是在创作图像时强制使用“图像替代文字”字段。但是如果没有创作图像，那么“图像替代文字”不应该是强制性的。我们怎样才能在AEM 6.2中实现触摸ui？

                        <image

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/form/fileupload"

                            autoStart="{Boolean}false"

                            class="cq-droptarget"

                            fieldDescription=“Authored Image"

                            fieldLabel="Image"

                            fileNameParameter="./fileName"

                            fileReferenceParameter="./fileReference"

                            mimeTypes="[image]"

                            multiple="{Boolean}false"

                            name="./imagedragdrop"

                            title="Upload Image Asset"

                            uploadUrl="${suffix.path}"

                            useHTML5="{Boolean}true"/>

                        <imageAltText

                            jcr:primaryType="nt:unstructured"

                            sling:resourceType="granite/ui/components/foundation/form/textfield"

                            fieldDescription=“Image alt text"

                            fieldLabel="Image Alt Text"

                            name="./imageAltText"/>

Answer 1

以下是实现此目的的简单方法：

创建文件上传窗口小部件时，它将具有类is-filled，当它未被创作时，它将没有该类。

<强>首先

我们需要为这两个字段指定一个特殊的选择器，我将使用ID＆＃39; s：

将属性id="file-upload-special"添加到文件上载对话框小部件中将属性id="alt-special"添加到alt文本（文本字段）小部件

<强>第二

使用以下categories="[cq.authoring.dialog]"

创建一个clientlib

<强>第三

将以下js添加到clientlib：

// register a validator
$(window).adaptTo("foundation-registry").register("foundation.validation.validator", {
  selector: "#alt-special", // validates the specific alt field
  validate: function(el) {
    var $el = $(el);
    var $form = $el.closest('form'); // get the form
    var $upload = $form.find('#file-upload-special'); // find the file-upload widget
    if($upload.hasClass('is-filled') && !$el.val()){ // if class exists, return validation msg
        return 'this field is required';
    } else {
        return;
    }
  }
});

现在只有在创作文件上传时才应验证alt字段。

在AEM 6.2中，如何根据图像字段强制使用图像替换文本字段

1 个答案: