parsley.js 与 jquery-选择的 errorsClass 未应用

Question

我正在努力弄清楚为什么 parsley.js 不会将我定义的 errorClass 添加到使用 chosen (https://harvesthq.github.io/chosen/)

增强的字段中

我创建了这个 fiddle，它显示了我遇到的问题。有 2 个相同的 select 列表 - 一个使用 chosen 增强，另一个标准。

当您单击提交按钮时，两个字段都经过验证，但只有标准 select 将 'has-error' class 应用于其父项 'input-group' div.

有什么想法吗？我想让这两个很棒的插件一起玩。

代码如下：

<form id="myForm">
<div class="input-group">
    <select class="select" name="a[]" multiple="multiple" data-parsley-required data-parsley-mincheck="2">
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
    </select>
</div>

<div class="input-group">
    <select name="b[]" multiple="multiple" data-parsley-required data-parsley-mincheck="2">
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
        <optgroup label="Section">
            <option>Drop Down Option A</option>
            <option>Drop Down Option B</option>
        </optgroup>
    </select>
</div>
    <input type="submit" />
</form>

$(document).ready(function() {
    window.ParsleyConfig = {
        errorClass: 'has-error',
        successClass: 'has-success',
        classHandler: function(ParsleyField) {
            return ParsleyField.$element.parents('.input-group');
        },
        errorsContainer: function(ParsleyField) {
            return ParsleyField.$element.parents('.input-group');
        },
        errorsWrapper: '<span class="error-block">',
        errorTemplate: '<div></div>'
    };

    $(".select").chosen();

    $("#myForm").parsley();

    $("#myForm").on('submit', function(e) {
        var f = $(this);
        f.parsley().validate();

        if (f.parsley().isValid()) {
            alert('The form is valid');
        } else {
            alert('There are validation errors');
        }

        e.preventDefault();
    });
});

.has-error {
  background-color: #ff0000;
}

Answer 1

好的，解决方法很简单！

更改是对 classHandler 和 errorsContainer 的 return - 使用父（单数）而不是父（复数）

将配置 js 更改为....

window.ParsleyConfig = {
    errorClass: 'has-error',
    successClass: 'has-success',
    classHandler: function(ParsleyField) {
        return ParsleyField.$element.parent('.input-group');
    },
    errorsContainer: function(ParsleyField) {
        return ParsleyField.$element.parent('.input-group');
    },
    errorsWrapper: '<span class="error-block">',
    errorTemplate: '<div></div>'
};

parsley.js 与 jquery-选择的 errorsClass 未应用

parsley.js with jquery-chosen errorsClass not applied

jquery-chosen

parsley.js