bootstrap校验laydate起止日期联动失效问题及解决方法
weixin_43939111 人气:0项目场景:
提示:这里简述项目相关背景:
项目中用到bootstrapValidator,以及laydate(by:贤心,插件效果美观)。
项目表单中,有两处需要联动校验:开始日期,结束日期。
规则:两项必填,开始日期不能晚于结束日期
问题描述
提示:这里描述项目中遇到的问题:
因为使用的外部插件,在调试过程中出现以下问题:
1.单独绑定input变化监听触发校验失效
<input type="text" class="form-control" id="startTime" name="startTime" autocomplete="off">
//绑定使用laydate元素 laydate.render({ elem:'#startTime', type:'date', trigger:'click', done:function(){ } }) laydate.render({ elem:'#endTime', type:'date', trigger:'click', done:function(){ } }) $("#startTime").bind("change",function(){//尝试手动触发联动校验 $("#dataForm").data("bootstrapValidator").validateField("startTime");//校验结果无任何反馈 $("#dataForm").data("bootstrapValidator").validateField("endTime");//校验结果无任何反馈 })
2.在laydate回调函数中手动设置校验有效,但校验不通过后修改值和提交按钮校验都没反应
laydate.render({ elem:'#startTime', type:'date', trigger:'click', done:function(){//手动触发联动校验 $("#dataForm").data("bootstrapValidator").validateField("startTime"); $("#dataForm").data("bootstrapValidator").validateField("endTime"); } }) $("#subForm").click(()=>{ $("#dataForm").data('bootstrapValidator').validate();//不起作用 })
解决方案:
在回调函数中增加重置校验
完整代码(“关键代码”已在注释中标出)
1、自定义bootstrapValidator.extend.js文件
$(document).ready(function(){ $.fn.bootstrapValidator.i18n.orderRange = $.extend($.fn.bootstrapValidator.i18n.orderRange || {}, { 'default':'' }); $.fn.bootstrapValidator.validators.checkStartDate = {//起始日期不晚于结束日期 validate:function(validator,$field,options){ var value = $field.val(); if($("#endTime").val().trim() < value){ return false }else{ return true } } }; $.fn.bootstrapValidator.validators.checkEndDate = {//结束日期不早于起始日期 validate:function(validator,$field,options){ var value = $field.val(); if($("#startTime").val().trim() > value){ return false }else{ return true } } } })
2、html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <!--以下为主要引入文件--> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrapValidator.min.css"> <script src="./js/jquery.min.js"></script> <script src="./js/laydate/laydate.js"></script> <script src="./js/bootstrap.min.js"></script> <script src="./js/bootstrapValidator.min.js"></script> <script src="./js/bootstrapValidator.extend.js"></script> </head> <body> <form class="form" id="dataForm"> <!--对比组,检查整体校验是否生效--> <div class="form-group"> <label>名称:</label> <input type="text" class="form-control" name="devName" id="devName"/> </div> <!--联动组--> <div class="form-group"> <label>开始日期:</label> <input type="date" class="form-control" name="startTime" id="startTime"/> </div> <div class="form-group"> <label>结束日期:</label> <input type="date" class="form-control" name="endTime" id="endTime"/> </div> </form> <button id="subForm">提交</button> </body> <script> function initDataForm(){//初始化校验规则 $("#dataForm").bootstrapValidator({ fields:{ devName:{ validators:{ notEmpty:{ message:"必填项不能为空" } } }, startTime:{ validators:{ notEmpty:{ message:"必填项不能为空" }, checkStartDate:{ message:"开始日期不能晚于结束日期" } } }, endTime:{ validators:{ notEmpty:{ message:"必填项不能为空" }, checkStartDate:{ message:"结束日期不能早于开始日期" } } } } }) } initDataForm(); laydate.render({ elem:'#startTime', type:'date', trigger:'click', done:function(){ $('#dataForm').data("bootstrapValidator").resetField("startTime");//关键代码 $('#dataForm').data("bootstrapValidator").resetField("endTime");//关键代码 $("#dataForm").data("bootstrapValidator").validateField("startTime"); $("#dataForm").data("bootstrapValidator").validateField("endTime"); } }) laydate.render({ elem:'#endTime', type:'date', trigger:'click', done:function(){ $('#dataForm').data("bootstrapValidator").resetField("startTime");//关键代码 $('#dataForm').data("bootstrapValidator").resetField("endTime");//关键代码 $("#dataForm").data("bootstrapValidator").validateField("startTime"); $("#dataForm").data("bootstrapValidator").validateField("endTime"); } }) $("#subForm").click(()=>{ $("#dataForm").data('bootstrapValidator').validate(); }) </script>
分析:
本例使用到的各版本(css版本省略):
jquery.min.js | bootstrap.min.js | bootstrapValidator.min.js | laydate.js |
---|---|---|---|
v2.1.4 | v3.3.7 | v0.5.3 | v5.0.9 |
在发现校验无法生效后查找了多方面的资料,也用原生的<input type="datatime"/>
试验过,个人感觉,单独使用代码主动触发校验某项后,这一项在值改变后不会重复校验。
操作顺序:
①点“提交”按钮
②开始日期报“必填项不能为空”
③开始日期和结束日期填入合法值或非法值
结果:无论第③步是否输入合理,输入框下的错误提示依旧是“必填项不能为空”
需要重置之前的校验状态。
通过在触发校验代码处添加前置语句,完美解决了这个问题:
$('#dataForm').data("bootstrapValidator").resetField("startTime");//关键代码 $('#dataForm').data("bootstrapValidator").resetField("endTime");//关键代码 $("#dataForm").data("bootstrapValidator").validateField("startTime"); $("#dataForm").data("bootstrapValidator").validateField("endTime");
可能引入版本不同的原因,我只有resetField
和validateField
方式才有效
网上还有其他写法,或许在其他版本下会生效,请参考:
重置状态写法:
$("#dateForm").bootstrapValidator("updateStatus",$("#startTime"),"VALID"); //(此写法我本地不起作用)或 $("#dateForm").data("bootstrapValidator").updateStatus("startTime","VALID");//此写法我本地报错updateStatus is not a function
手动触发校验写法:
$("#dataForm").validator($("#startTime"));//此写法我本地报错validator is not a function
补充:
还有一种方式,通过修改css来实现模拟联动,但是在此例中不适用。
- 对于laydate插件:不会主动触发校验,只能在
done
中写主动校验代码,然后在输入框内容变化时才能校验。如果不加重置校验状态语句,出现第一次校验不通过后将无法进行二次校验。 - 对于浏览器自带的
<input type="date">
,输入框值变化,可触发校验,但是不灵敏(比如,开始选:2023年1月15日,结束选2023年1月10日,此时开始报“不能晚于结束日期”,再将结束选到2023年1月18日,但开始框的红色警告依然存在,只有开始日期重选一遍,底下红色警告才消失),所以,也同样需要加重置校验状态语句+代码触发关联框校验,才能实现联动的效果
加载全部内容