Parsley.js - 更改错误容器答案

【问题标题】：Parsley.js - change error containerParsley.js - 更改错误容器
【发布时间】：2014-02-11 12:57:04
【问题描述】：

我想更改每条错误消息的位置。即在各自的<div class="errorBlock"></div> 中显示错误消息。通过使用文档的代码，错误消息显示在元素（输入）之前，并且未按预期显示。有什么想法吗？

根据文档：

errors: {
    container: function (element, isRadioOrCheckbox) {
        var $container = element.parent().find(".parsley-container");
        if ($container.length === 0) {
            $container = $("<div class='parsley-container'></div>").insertBefore(element);
        }
        return $container;
    }
}

我的html代码是：

输入

<div class="input-group date date-picker" data-date-format="dd/mm/yyyy" data-date-viewmode="years">             
  <input class="form-control dataScrap firstInput" type="text" parsley-notblank="true" parsley-required="true" parsley-error-message="You must input a birth date" readonly="readonly"/>
  <span class="input-group-btn">
   <button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
  </span>
  <div class="errorBlock"></div>
</div>

复选框

<div class="checkbox-list">
    <label class="checkbox-inline">
        <input type="checkbox" parsley-group="checkboxGroup" parsley-mincheck="2"> Checkbox 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" parsley-group="checkboxGroup"> Checkbox 2
    </label>
    <div class="errorBlock"></div>
</div>

【问题讨论】：

标签： jquery validation parsley.js

【解决方案1】：

您可以通过覆盖Parsley's default options 来做到这一点。（注意：我说的是最新版本 [v2.0]，我建议您使用它）您基本上想给 Parsley 一个方法，该方法将根据输入字段找到 .errorBlock 容器。它看起来像这样：

var parsleyConfig = {
    errorsContainer: function(pEle) {
        var $err = pEle.$element.siblings('.errorBlock');
        return $err;
    }
}

$('#yourFormID').parsley(parsleyConfig);

还有here's a live example。

注意：使用此方法，您不能使用 Makrand 建议的 parsley-validate 属性。在您的表单上调用 .parsley 会做同样的事情，除了您可以向其中添加自定义选项。此外，您需要在所有 parsley 属性前加上 data-，因为它们是数据属性（从 v2.0 开始）。

【讨论】：

【解决方案2】：

试试这个：

data-parsley-errors-container=".errorBlock"

你可以在Parsley Documentation查看这个属性

【讨论】：

在这里不起作用，因为每个输入元素后面都有
。 parsley-error-container，会将所有消息显示给指定的处理程序。
@andreas777 为什么不在顶部添加一个 DIV 并为其提供一个用于 parsley-error-container 的类
@Makrand 这不是要求。我希望在每个输入元素之后（单独）在 div 中显示每个错误。我需要帮助如何按照文档示例执行此操作... >> $container = $("
").insertBefore(element);
我希望这是动态的并使用错误：{container} 而不是 parsley-error-container 属性
"~ .my-sibling-error-container" 见这里css-tricks.com/child-and-sibling-selectors

【解决方案3】：

Parsley API 已更新。目前的方法是：

data-parsley-errors-container="#your-div-id"

在此处查看文档：http://parsleyjs.org/doc/index.html#psly-ui-for-field

【讨论】：

【解决方案4】：

参考@ahmad hussain 的回答，您还需要在表单中添加一个属性：

<form parsley-validate>

【讨论】：