我正在使用 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>
.
这可以实现吗?
最佳答案
您可以(至少)通过两种方式设置错误容器。
改变带有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"
.设置要由 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'); } };
关于javascript - 更改 parsley-errors-list 在 parsleyjs 中的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30122028/