正确使Parsley 2.x与Bootstrap 3配合使用 [英] Getting Parsley 2.x working with Bootstrap 3 correctly

问题描述

我正在将Twitter Bootstrap 3.1.1与Parsley v2.0.0-rc3一起使用.除了classHandler选项之外，我大部分情况下都使它起作用.

I am using Twitter Bootstrap 3.1.1 with Parsley v2.0.0-rc3. I made it mostly work apart from classHandler option.

我有这样的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>"
});

一切正常，但是成功/错误类适用于错误的元素.页面加载后，我得到了:

Everything works fine, but success / error classes are applied to wrong element. After the page is loaded, I get this:

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

经过验证，结果是这样的:

And when validated, the result is this:

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

但是，我希望有所不同:

However, I expect something different:

<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的新手，所以我不知道如何对其进行进一步的调试和修复.

I have verified using alert that the function runs. But I am new to jQuery and JavaScript, so I do not know how to debug it any further and fix it.

推荐答案

您应该尝试:

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

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

The el is an object from parsley (I have seen it using chrome dev console) and he has a $element field with the JQuery element :)

这篇关于正确使Parsley 2.x与Bootstrap 3配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！