更改 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> 中的最后一个 child/element。

这可以实现吗？

Answer 1

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

更改具有 DOM 属性的容器

如果您只有一个输入（或一组输入，就像您一样）并且您想要更改这些输入的错误容器，您可以使用 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>。

在这种情况下，您不需要将 data-parsley-errors-container 添加到所有复选框，因为您是 "grouping" 它们 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');
    }
};

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

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

Answer 3

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

<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>

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

Change the position of parsley-errors-list in parsleyjs

html

javascript

jquery

parsley.js