仍是表單驗證的問題,發現若是表單內有使用BootStrap-select的下拉選框,在重置表單內容時,會觸發對下拉選框的驗證,而且驗證的提示
不會被清除,仍然會存在。
1.HTML結構
<form id="validatorForm">
...
<div class="form-group fieldValue-parDiv valideDiv">
<select name="directPicker" id="selectDirect" class="form-control form-control28">
<option value="fromEastToWest">自東向西</option>
<option value="fromWestToEast">自西向東</option>
<option value="fromSourthToNorth">由南往北</option>
<option value="fromNorthToSourth">由北往南</option>
</select>
</div>
...
<button type="button" id="resetForm">重置<button>
</form>
2.錯誤的重置按鈕綁定事件
$('#resetForm').on('click', function () {
//下拉選框初始化
$("#selectDirect").selectpicker('deselectAll');
})
此時點擊重置按鈕只會將選框初始化,可是卻會觸發對下拉選框的驗證,此前咱們已經將選框重置,因此確定是通不過驗證獲得,因此會出現
紅色的提示信息。那麼如何將這些提示信息也去掉?
3.正確地重置按鈕綁定事件
$('#resetForm').on('click', function () {
//下拉選框初始化
$("#selectDirect").selectpicker('deselectAll');
//啓用字段驗證器
$('#validatorForm').data('bootstrapValidator').enableFieldValidators('directPicker', true);
})
enableFieldValidators(field, enabled, validator)
用來開啓/關閉字段驗證器。
參數(*爲必填) |
類型 |
描述 |
field* |
String |
字段名稱 |
enabled* |
Boolean |
爲true 時開啓字段驗證器,爲false 時則關閉 |
validator |
String |
驗證器名稱,若是未設置,全部字段驗證器將會開啓/關閉 |