验证长度分量取决于所选的h1 / h2

时间:2019-07-16 09:57:35

标签: html aem sightly

根据两个不同的输入,在哪里写验证的正确位置(在文本字段上增加最大长度)。用户可以在h1或h2之间选择一个文本字段大小。当用户选择h1时,我希望将文本限制为10个元素,而选择h2时,限制为7个元素。我使用的是AEM 6.2。

我尝试验证一个htl文件,验证一个cq_dialog。当我尝试验证一个htl文件时,我在实现方面遇到问题(它不起作用),但是在cq_dialog.xml文件中,我只能验证一个文本标签一次,并且我无法更改验证已根据用户选择的文本大小进行更改的逻辑。 这是我的cq_dialog代码,对我来说最舒服的是在此处添加所有逻辑,但是我不知道这是可能的吗?

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Text"
          sling:resourceType="cq/gui/components/authoring/dialog">
    <content jcr:primaryType="nt:unstructured"
             sling:resourceType="granite/ui/components/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                            jcr:primaryType="nt:unstructured"
                            name="./title"
                            fieldLabel="Text"
                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                            fieldDescription="Max 10 elements"
                    />
                    <type
                            sling:resourceType="granite/ui/components/foundation/form/select"
                            fieldLabel="Type"
                            name="./type"
                            jcr:primaryType="nt:unstructured"
                    >
                        <items jcr:primaryType="nt:unstructured">
                            <h1 jcr:primaryType="nt:unstructured" text="H1" value="h1"/>
                            <h2 jcr:primaryType="nt:unstructured" text="H2" value="h2"/>
                        </items>
                    </type>
                </items>

            </column>
        </items>
    </content>

1 个答案:

答案 0 :(得分:0)

您必须创建一个clientlib并添加JS以注册此用例的验证器。对话框必须引用clientlib的类别。使用对话框使用的一些OOTB类别,例如“ cq.authoring.editor”,将使您的clientlib可以进行对话框验证。

设置了clientlib后,请在Granite框架中注册验证器。有关如何注册验证器的信息,请参见https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/validation/index.html#validator

这里是如何针对用例执行此操作的示例。

   var foundationRegistry = $(window).adaptTo("foundation-registry");
   foundationRegistry.register("foundation.validation.validator",{
    selector: "[name='./title']",
    validate: function(el){
        var text = el.value;
        var type = $("[name='./type']").val();
        var limit = type === 'h1' ? 10 : 7;

        var numberOfElements = getNumberOfElements(text); //not sure what number of elements means in your context
        if(numberOfElements > limit){
              return "The input cannot exceed "+limit+ " elements for type "+type;
        }
        //the field is considered invalid if this method returns a string,
       // the string returned is also used as the error message.
    }
  }); 
* the code has not been tested

由于clientlib的类别是通用的,因此此验证器将绑定到所有对话框。您可以使字段的选择器更具体,也可以更改clientlib类别并仅在此对话框上显式引用它。