更改 parsleyjs 中 parsley-errors-list 的位置答案

【问题标题】：Change the position of parsley-errors-list in parsleyjs更改 parsleyjs 中 parsley-errors-list 的位置
【发布时间】：2015-07-19 06:19:11
【问题描述】：

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

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

问题是.parsley-errors-list 被放置在表单元素的“输入、文本区域、收音机等”之后。打破我的布局如下：

<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> 中的最后一个子/元素。

这可以实现吗？

【问题讨论】：

标签： javascript jquery html parsley.js

【解决方案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"“分组”。

设置 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>，并更改了 Parsley 的 errorsContainer 选项。如果我们的元素在字段集中，则错误将显示在 #checkbox-errors 内。

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

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

【讨论】：

我不能改变它的位置吗？我只是找不到决定错误容器位置的函数，你能帮我找到吗？因为我可以通过使用 .closest("fieldset") 稍微调整代码来实现我想要的
@Leo 看看更新的答案。我想你是在第二种方法之后。让我知道它是否有效。
第二个选项正是我要找的！每个字段集都会有自己的错误，因此它们不会被抱怨。我可以通过破解插件而不是添加附加功能来实现这一点吗？如果不放心就使用这个功能。
@Leo 您可以更改插件以“自动”执行此操作，但我强烈建议不要这样做，因为您将失去轻松使用新版本的能力。如果你真的想这样做，你应该在 1277 行周围更改 code (ver.2.0.7)。
我已经考虑到了这一点。在代码文档的最顶部，我注释掉了我所做的更改。因此，当我将其更新到新版本时，我可以再次应用更改。看看线，你会推荐我做什么？因为我已经调整了插件以使用 .closest(fieldset) 将类 parsley-error 和 success 添加到文件集中 - 它有效，但它们并不太适用于包含所选选择输入的文件集，直到你点击它们又一次：/ - 我看了一下代码，它实际上只添加了 class=""

【解决方案2】：

试试这个：

$.listen('parsley:field:error', function(fieldInstance){
            var fieldName = fieldInstance.$element.attr('name');
            var field = $('input[name="'+fieldName+'"]');
            var fieldWrapper = field.parents('fieldset');
            if (fieldWrapper.find('.errors_container').length > 0) {
                setTimeout(function(){
                    fieldWrapper.find('.errors_container').append(fieldWrapper.find('.parsley-errors-list'));
                },100);
            }
        });
        $('form').parsley();
}

使用类，因为它适用于许多领域。

【讨论】：

【解决方案3】：

针对 parsley js 中的这种 UI 错误。您可以使用 data-parsley-errors-container 自定义验证器根据您的表单需要放置 parsley 错误消息。

<div>
    <div class="radio radio-primary">
        <input type="radio" id="cellPhone1" value="1" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
        <label for="cellPhone1"> Yes </label>
    </div> 
    <div class="radio radio-primary">
        <input type="radio" id="cellPhone0" value="0" name="rd_cell_phone" required="" data-parsley-error-message="Please select an option" data-parsley-errors-container="#cell-phone-validation-error-block">
        <label for="cellPhone0"> No </label>
    </div> 
</div>
<div class="margin-top10" id="cell-phone-validation-error-block"></div>

【讨论】：