使用datepicker结合jquery.validationEngine验证框架,失焦提示框有关问题

使用datepicker结合validationEngine验证框架,失焦提示框有关问题

---

一、问题描述：

---

当使用datepicker结合jquery.validationEngine进行非空验证时，选择好时间，但失去焦点后非空提示框并没有消失

二、解决方法 1：

---

<form id="planForm">    <div class="row no-margin">        <div class="col-xs-6 no-padding">            <div class="col-xs-4"><span class="text-danger">*</span>计划开始时间：</div>            <div class="col-xs-8 input-group input-group-sm">                <input type="text" id="planBeginDate" class="form-control validate[required]" />                    <span class="input-group-addon">                         <i class="icon-calendar"></i>                    </span>            </div>     </div>                             <div class="col-xs-6 no-padding">            <div class="col-xs-4"><span class="text-danger">*</span>计划结束时间：</div>            <div class="col-xs-8 input-group input-group-sm">                <input type="text" id="planEndDate" class="form-control validate[required]" />                    <span class="input-group-addon">                         <i class="icon-calendar"></i>                    </span>            </div>        </div>    </div></form>

//页面初始化时进行非空验证$(function() {    $("#planForm").validationEngine({promptPosition: "bottomRight"});}//提交表单时进行非空验证function saveChange(flag) {    // 校验变更信息    if (!$("#form_0").validationEngine('validate') || !$("#planForm").validationEngine('validate')){        return;    }    //当有两个非空验证表单时，第二个可能不起作用，就对其每一项进行是否有值验证    if ($("#planBeginDate").val() == "" || $("#planEndDate").val() == ""){        alert("变更计划开始、结束时间必填");        return;    }}//因为当datepicker时间插件选好时间，但input框不能辨别是否是焦点失去，所以非空验证还在，只有当再点击下文本框或提交按钮非空提示框才会消失，所以使用下面方法，解决上面问题： $("#planBeginDate").change(dateChange); $("#planEndDate").change(dateChange);function dateChange(){    if (!$("#planForm").validationEngine('validate') ){        return;    }}

解决方法 2：

---

使用validationengine时，datepicker是有问题的,因为验证绑定到blur事件。显然我失去了焦点，但是在任何数据输入到字段区域前出现了一个奇怪的bug。使用一个延迟在datepicker上进行绑定。
使用这种模式需要添加类datepicker你输入,像这样:

<input type="text" id="req" name="req" class="validate[required] text-input datepicker" value="">