2014-03-25 44 views
5

我想添加歐芹驗證到一組引導程序3 btn組中包含的單選按鈕。錯誤的位置錯誤信息範圍與Parsley 2.x和引導3

問題是,parsley注入的錯誤包裝(在我的案例中設置爲跨度)出現在兩個選項(包含在標籤內)之間,而不是在btn-group div之外。

<div class="form-group"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">Yes</label> 
     <span class="help-block" id="parsley-id-multiple-BuyAgain"></span> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="3282">No</label> 
    </div> 
</div> 

任何建議,我怎麼能解決這個問題:

這下面的示例中所示?

回答

13

在深入研究源代碼之後,我注意到初始化Parsley時有一個「errorsContainer」選項可用。

改變initalisation功能後:

$(".validate-form").parsley({ 
    successClass: "has-success", 
    errorClass: "has-error", 
    classHandler: function (el) { 
     return el.$element.closest(".form-group"); 
    }, 
    errorsContainer: function (el) { 
     return el.$element.closest(".form-group"); 
    }, 
    errorsWrapper: "<span class='help-block'></span>", 
    errorTemplate: "<span></span>" 
}); 

我現在得到的結果HTML:

<div class="form-group"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="True" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">Yes</label> 
     <label class="btn btn-default"><input type="radio" name="BuyAgain" value="False" data-parsley-required="true" data-parsley-multiple="BuyAgain" data-parsley-id="1481">No</label> 
    </div> 
    <span class="help-block" id="parsley-id-multiple-BuyAgain"></span> 
</div> 
+0

根據(最新文檔),您需要在包含parsley.js腳本之前定義一個window.ParsleyConfig對象。在這裏,您可以覆蓋這些字段,如下所示:http://parsleyjs.org/doc/annotated-source/defaults.html – tapmonkey

+0

如果您另外依賴數據屬性來配置驗證選項(即您使用數據自動綁定-parsley-validate),你可以覆蓋實例的配置,而不必將整個初始化移動到JavaScript。 (例如'$('[data-parsley-validate]')。parsley()。options.errorsContainer = function(el){return el。$ element.closest(「。form-group」);};') – highvolt

2

另一種反應,這是equivqlent到@喬恩反應是增加一個數據,香菜-errors-container屬性到你的表單。

<form data-parsley-errors-container=".form-group" data-parsley-validate=""> 
    ... 
</form> 
+1

使用data-parsley-errors-container屬性將選擇最後的.form-group,而不是根據上下文相對於正在驗證的字段從層次結構中選擇最接近的。因此,如果您不希望將錯誤彙總到表單末尾的一個容器中,則需要使用JavaScript回調函數來維護將錯誤消息與其相關字段分組的行爲(數據屬性僅支持選擇器而不是函數引用)。 – highvolt