在parsleyjs中更改parsley-errors-list的位置 [英] Change the position of parsley-errors-list in parsleyjs

问题描述

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

I am using parsleyjs.org to validate my forms.

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

The plugin creates a ui.parsley-errors-list when an input has a validation error.

问题是.parsley-errors-list恰好放置在表单元素的输入，文本区域，单选按钮等"之后.破坏了我的布局，如下所示:

The problem is that the .parsley-errors-list is being placed just after the form element's "input, textarea, radio etc.." breaking my layout as follows:

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

Instead, the .parsley-errors-list need to be positioned to be the last child/element within the container <fieldset>.

这可以实现吗?

推荐答案

您可以使用(至少)两种方法设置错误容器.

You can set the error container with (at least) two ways.

1. 使用DOM属性更改容器

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

In cases where you only have one input (or group of inputs, like you do) and you want to change the container of the errors on those inputs, you can use data-parsley-errors-container="#element" (see the docs). Here is an example (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>.

Note the attribute data-parsley-errors-container="#checkbox-errors" on the first checkbox and the element <div id="checkbox-errors"></div> at the end of the fieldset.

在这种情况下，您无需将data-parsley-errors-container添加到所有复选框，因为您是使用data-parsley-multiple="checkbox2"对它们进行分组".

In this case you don't need to add the data-parsley-errors-container to all checkboxes because you're "grouping" them with data-parsley-multiple="checkbox2".

设置欧芹使用的自定义配置

在您只有部分或全部输入并且想要更改默认容器的位置的情况下.假设您所有的字段都放置在一个字段集中，并且您想在该字段集的末尾显示错误.

In cases where you have a few or all inputs and you want to change the position of the default container. Lets say all your fields are placed inside a fieldset and you want to display the errors at the end of the fieldset.

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

This solution allows you to change the default container for each field (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内.

In this solution we've added the element <div id="checkbox-errors"></div> before the end of the fieldset and changed the errorsContainer option of Parsley. If our element is inside a fieldset the errors will be displayed inside the #checkbox-errors.

基于此示例，您还可以为所有字段设置相同的容器.在这种情况下，您的选择应如下所示( jsfiddle演示 ):

Based on this example, you are also able to set the same container for all fields. In this case your options would be something like this (jsfiddle demo):

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

这篇关于在parsleyjs中更改parsley-errors-list的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！