javascript - 更改 parsley-errors-list 在 parsleyjs 中的位置

Question

我正在使用 parsleyjs.org验证我的表格。

插件创建一个 ui.parsley-errors-list当输入有验证错误时。

问题是 .parsley-errors-list被放置在表单元素的“input、textarea、radio etc..”之后，打破了我的布局，如下所示:

<fieldset>
    <p>Checkboxs with a max</p>
    <label class="checkbox parsley-error">
        <input name="checkbox2" type="checkbox" required="" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" data-parsley-id="5492"> <span></span>
        <p>Normal</p>
    </label>
    <ul class="parsley-errors-list filled" id="parsley-id-multiple-checkbox2">
        <li class="parsley-required">This value is required.</li>
    </ul>
    <label class="checkbox">
        <input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492">   <span></span>
        <p>Normal</p>
    </label>
    <label class="checkbox">
        <input name="checkbox2" type="checkbox" data-parsley-multiple="checkbox2" data-parsley-id="5492">   <span></span>
        <p>Normal</p>
    </label>
</fieldset>

相反，.parsley-errors-list需要定位为容器中的最后一个子元素/元素 <fieldset> .

这可以实现吗？

Answer 1

您可以(至少)通过两种方式设置错误容器。

1. 改变带有DOM属性的容器

   如果您只有一个输入(或一组输入，就像您一样)并且您想要更改这些输入的错误容器，您可以使用 data-parsley-errors-container="#element" (see the docs)。这是一个示例 ( jsfiddle demo )

   <fieldset>
       <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" data-parsley-errors-container="#checkbox-errors" /> 1
       </label>
       <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
       </label>
       <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
       </label>
   
       <div id="checkbox-errors"></div>
   </fieldset>
   

   注意属性data-parsley-errors-container="#checkbox-errors"在第一个复选框和元素 <div id="checkbox-errors"></div> 上在字段集的末尾。

   在这种情况下，您不需要添加 data-parsley-errors-container所有复选框，因为您将它们“分组”为 data-parsley-multiple="checkbox2" .

2. 设置要由 Parsley 使用的自定义配置

   如果您有几个或所有输入并且您想要更改默认容器的位置。假设您所有的字段都放在一个字段集中，并且您想在字段集的末尾显示错误。

   此解决方案允许您更改每个字段的默认容器 (jsfiddle demo)

   <fieldset>
       <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox1" required data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option1" /> 1
       </label>
       <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox2" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option2" /> 2
       </label>
       <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox3" data-parsley-maxcheck="2" data-parsley-multiple="checkbox2" value="option3" /> 3
       </label>
   
       <div id="checkbox-errors"></div>
   </fieldset>
   
   <script>
   $(document).ready(function() {
       var parsleyConfig = {
           errorsContainer: function(parsleyField) {
               var fieldSet = parsleyField.$element.closest('fieldset');
   
               if (fieldSet.length > 0) {
                   return fieldSet.find('#checkbox-errors');
               }
   
               return parsleyField;
           }
       };
   
   
       $("form").parsley(parsleyConfig);
   });
   </script>
   

   在此解决方案中，我们添加了元素 <div id="checkbox-errors"></div>在字段集结束之前更改了 errorsContainer欧芹的选择。如果我们的元素在字段集中，错误将显示在 #checkbox-errors 中.

   基于此示例，您还可以为所有字段设置相同的容器。在这种情况下，您的选择将是这样的(jsfiddle demo):

   var parsleyConfig = {
       errorsContainer: function(parsleyField) {
           return $('#errors');
       }
   };