bootstrap-select 与 jquery validate 页面数据检验 错误

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

正常显示:

这里写图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值