使Parsley 2.x正确使用Bootstrap 3

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

厄尔尼诺是香菜对象（我已经使用Chrome开发者控制台中看到了），他有一个$元素字段与JQuery的元素:)

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