zoukankan      html  css  js  c++  java
  • bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验

    bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验 (解决办法)
    问题描述:bootstrapValidator插件默认情况下,不会重复校验一个已经标记为验证通过或验证不通过的字段。so ,当开始触发校验后,没有通过校验,当正确选择日期后,并不会刷新校验结果,就会导致数据无法正常提交
    问题解决:
    根据应用场景分析,当日期选择插件关闭时,期望能够触发校验。所以使用bootstrap-datepicker的hide方法。当日期选择框关闭时,执行刷新校验。
    代码如下:
    js:
    /* 加载时间选择插件 */
    $("#f_workr_remind_date").datepicker({
    todayBtn : "linked",
    autoclose : true,
    todayHighlight : true,
    endDate : new Date()
    }).on('hide',function(e) { //当日期选择框关闭时,执行刷新校验
    $('#project_form').data('bootstrapValidator').updateStatus('f_workr_remind_date', 'NOT_VALIDATED',null).validateField('f_workr_remind_date');
    });
    html:
    <form id="project_form" class="form-horizontal">
    <span class="input-group-addon"><span class="fa fa-calendar"> </span>
    <input type="text" name="f_workr_remind_date" id="f_workr_remind_date" class="form-control datepicker" placeholder="提醒时间" value="" />
    </form>
     
     
    bootstrap-datetimepicker 的使用
    css:
    <link rel="stylesheet" type="text/css" href="../js/plugins/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" type="text/css" href="../js/plugins/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
    js:
     
    <script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-timepicker.min.js"></script>
    <script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="../js/plugins/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    html:
    <div class="row">
    <label class="col-md-3 control-label">记录提醒时间</label>
    <div class="col-md-8">
    <div class="input-group">
    <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
    <input type="text" name="f_workr_remind_date" id="f_workr_remind_date" class="form-control datepickertime" placeholder="提醒时间" value="" />
    </div>
    <span class="help-block">*必填项</span>
    </div>
    </div>
    js:
    $('#f_workr_remind_date').datetimepicker({
    useCurrent: true,
    todayBtn: 1,
    autoclose: 1,
    }).on('hide',function(e) { //当日期选择框关闭时,执行刷新校验
    $('#project_form').data('bootstrapValidator').updateStatus('f_workr_remind_date', 'NOT_VALIDATED',null).validateField('f_workr_remind_date');
    });
     
  • 相关阅读:
    第11组(73) 需求分析报告
    第11组(73)团队展示
    结对编程作业
    第02组 Alpha冲刺 总结
    第02组 Alpha冲刺 (6/6)
    第02组 Alpha冲刺 (5/6)
    第02组 Alpha冲刺 (4/6)
    第02组 Alpha冲刺 (3/6)
    第02组 Alpha冲刺 (2/6)
    第02组 Alpha冲刺 (1/6)
  • 原文地址:https://www.cnblogs.com/leo0705/p/8473115.html
Copyright © 2011-2022 走看看