BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑

還是表單驗證的問題,發現如果表單內有使用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 驗證器名稱,如果未設置,所有字段驗證器將會開啓/關閉
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章