让 Parsley 2.x 正确使用 Bootstrap 3

Posted 2023-05-08

【中文标题】让 Parsley 2.x 正确使用 Bootstrap 3

【英文标题】：Getting Parsley 2.x working with Bootstrap 3 correctly

【发布时间】：2014-04-08 16:34:16

【问题描述】：

我正在使用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>

然后像这样运行 Parsley：

$("#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 的新手，所以我不知道如何进一步调试和修复它。

【参考方案1】：

你应该试试：

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

el 是来自 parsley 的一个对象（我已经使用 chrome 开发控制台看到它），他有一个带有 JQuery 元素的 $element 字段:)

【讨论】：

谢谢，这正是我想要的。

您能否谈谈您如何看待开发控制台中的el 对象？

在 classHandler 函数中放置一个断点，然后使用 "el" ;) 你的断点定义了你的函数的范围，或者看起来是这样

【参考方案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>"
);