Javascript 更改parsleyjs中parsley错误列表的位置

我正在使用验证我的表单

当输入有验证错误时，插件创建一个

ui.parsley错误列表

问题是，
.parsley errors list
被放置在表单元素“input、textarea、radio等”的后面，破坏了我的布局，如下所示：

<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列表
定位为容器中的最后一个子元素

这是可以实现的吗
 您可以（至少）通过两种方式设置错误容器

更改具有DOM属性的容器

如果您只有一个输入（或一组输入，如您所做），并且希望更改这些输入上的错误容器，则可以使用
data parsley errors container=“#element”
（）。下面是一个示例（）

在这个解决方案中，我们在字段集的末尾之前添加了元素
，并更改了欧芹的
errorscocontainer
选项。如果我们的元素位于字段集中，则错误将显示在
#复选框errors
中

基于此示例，您还可以为所有字段设置相同的容器。在这种情况下，您的选项如下（）：


试试这个：

$.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();
}

使用类，因为它适用于许多字段。
用于处理parsley js中的此类UI错误。
您可以使用数据欧芹错误容器自定义验证器根据表单需要放置欧芹错误消息



对
不
我不能改变它的位置吗？我就是找不到决定错误容器位置的函数，你能帮我找到吗？因为我可能可以通过稍微调整代码来实现我想要的。最近的（“fieldset”）@Leo看看更新的答案。我想你在追求第二种方法。让我知道它是否有效。第二种选择正是我所寻找的！每个字段集都会有自己的错误，所以他们不会因为一个错误而被抱怨。我可以通过破解插件而不是添加额外的功能来实现这一点吗？如果不担心的话，我将使用这个功能。@Leo您可以更改插件以“自动”完成此操作，但我强烈建议您不要这样做，因为您将失去轻松使用新版本的能力。如果你真的想这样做，你应该改变1277线附近的距离。我已经考虑到了这一点。在代码文档的最顶端，我注释了我所做的更改。因此，当我将其更新为新版本时，我可以再次应用更改。请看一下线路，你建议我做什么？由于我调整了插件，将类parsley error和success添加到文件集，并使用.closest（fieldset）-它起了作用，但它们不太适用于包含选定输入的文件集，直到您再次单击它们：/-我查看了代码，它实际上只添加了class=”“
<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>

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

$.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();
}