页面使用bootstrap-select 作为下拉的显示
使用jquery validate提交表单时验证
错误1:
初始进行修改页面时 存在下拉框的页面报以下错误
An invalid form control with name=’isWork’ is not focusable.
对应代码:
<div class="form-group draggable">
<label class="col-sm-2 control-label">工作状态:</label>
<div class="col-sm-10">
<select id="id_select" class="selectpicker bla bla bli" data-live-search="true" name="isWork" th:field="*{isWork}" required="required">
<option value="">全部</option>
<option value="1">在岗</option>
<option value="2">离职</option>
</select>
</div>
</div>
加上表单提交验证即可解决
<script type="text/javascript" >
$(function(){
$('#tform').validate({
submitHandler: function(form){
loading('正在提交,请稍等...');
form.submit();
}
});
})
</script>
错误2:
后面又觉得下拉框显示的报错位置有问题
需要进行修改:
判断下 selectpicker的错误显示位置
$('#tform').validate({
submitHandler: function(form){
loading('正在提交,请稍等...');
form.submit();
},
errorPlacement: function(error, element) {
$("#messageBox").text("输入有误,请先更正。");
if (element.hasClass('selectpicker')) {
error.insertAfter('.bootstrap-select');
}else {
error.insertAfter(element);
}
}
});
boostrap-select 每次下拉验证:
$('#tform select').on('change', function(e) {
$('#tform').validate().element($(this));
});
$('.selectpicker').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});
正常显示: