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

来源:互联网 发布:jsp项目源码 编辑:程序博客网 时间:2024/05/22 00:12

页面使用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 0
原创粉丝点击