Question

我正在使用Twitter Bootstrap 3.1.1 Parsley v2.0.0-rc3。我使它主要与classHandler选项不同。

我有这样的HTML：

<div class="form-group">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control" id="username" name="username" required="" type="text" value="">   
</div>

像这样运行欧芹：

$("#register_form").parsley({
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function(el) {
        return $(el).closest(".form-group");
    },
    errorsWrapper: "<span class='help-block'></span>",
    errorTemplate: "<span></span>"
});

一切正常，但成功/错误类适用于错误的元素。页面加载后，我得到了这个：

<div class="form-group">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
    <span class="help-block" id="parsley-id-5043"></span>
</div>

验证后，结果如下：

<div class="form-group">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control has-error" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
    <span class="help-block filled" id="parsley-id-5043">
        <span class="parsley-required">This value is required.</span>
    </span>
</div>

然而，我期待一些不同的东西：

<div class="form-group has-error">
    <label class="control-label" for="username">User Name</label>
    <input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
    <span class="help-block filled" id="parsley-id-5043">
        <span class="parsley-required">This value is required.</span>
    </span>
</div>

我已使用alert验证该函数是否运行。但我是jQuery和JavaScript的新手，所以我不知道如何进一步调试它并修复它。

Answer 1

你应该尝试：

classHandler: function(el) {
    return el.$element.closest(".form-group");
}

el是来自欧芹的对象（我已经使用chrome dev控制台看到了它），并且他有一个带有JQuery元素的$ element字段：）

Answer 2

完整代码工作：

$("#register_form").parsley({
    successClass: "has-success",
    errorClass: "has-error",
    classHandler: function(e) {
        return e.$element.closest('.form-group');
    },
    errorsWrapper: "<span class='help-block'></span>",
    errorTemplate: "<span></span>"
});

让Parsley 2.x正确使用Bootstrap 3

2 个答案: