使用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="">