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