Javascript 让欧芹2.x正确使用Bootstrap 3

我正在使用TwitterBootstrap3.1.1和欧芹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="">   
</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>"
});

$（“#登记表”）。欧芹({
成功类：“拥有成功”，
errorClass:“有错误”，
类处理程序：函数（el）{
返回最近的（“.formgroup”）；
},
errorsWrapper:“”，
错误模板：“
});

一切正常，但成功/错误类应用于错误的元素。加载页面后，我得到以下信息：

<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，因此我不知道如何进一步调试和修复它。

您应该尝试：

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

el是一个来自parsley的对象（我在chrome开发控制台上看到过），他有一个带有JQuery元素的$element字段：）

完整代码工作：

$("#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>"
});

$（“#登记表”）。欧芹({
成功类：“拥有成功”，
errorClass:“有错误”，
类处理程序：函数（e）{
返回e.$element.closest（'.formgroup'）；
},
errorsWrapper:“”，
错误模板：“
});

谢谢，这正是我要找的。你能留下一些关于如何在开发控制台中查看

el

对象的注释吗？在classHandler函数中放置一个断点，然后使用“el”；）断点定义了函数的范围，或者看起来是这样