不能正常工作驗證引導日期選擇器

Question

我的表單與驗證引導日期選擇器一起工作。但不能正確驗證Bootstrap jalali datepicker（波斯語）。 當填寫字段然後提交時，驗證工作正常。但是，當字段消隱然後填充字段時，出現錯誤「需要開始日期」或「需要完成日期」。字段已滿，錯誤仍然存​​在。 我該如何解決這個問題？

<form class="form-horizontal" action="" method="post" name="delete_table" id="delete_table" role="form" enctype="multipart/form-data"> 

<div class="panel-body"> 
    <div class="form-group"> 
     <label class="col-md-2 control-label" for="family">show date</label> 
      <div class="form-group col-md-4"> 
       <div class="input-group input-append date"> 
        <input type="text" class="form-control datepicker" name="start_date" id="start_date" placeholder="start"/> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></span> 
       </div> 
      </div> 
      <div class="input-group input-append date col-md-4"> 
       <input type="text" class="form-control datepicker" name="finish_date" id="finish_date" placeholder="end"/> 
      </div> 
     </div> 
    </div> 
<div class="panel-footer"> 
    <button type="submit" id="submit_page" class="btn btn-success">save</button> 
</div> 
</form> 

的JavaScript

$("#start_date").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     isRTL: true, 
     dateFormat: "mm/dd/yy" 
    }) 
    .on('changeDate', function(e) { 
     // Revalidate the start date field 
     $('#delete_table').formValidation('revalidateField', 'start_date'); 
    }); 
    $("#finish_date").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     isRTL: true, 
     dateFormat: "mm/dd/yy" 
    }) 
    .on('changeDate', function(e) { 
     // Revalidate the start date field 
     $('#delete_table').formValidation('revalidateField', 'finish_date'); 
    }); 

$('#delete_table').formValidation({ 
     framework: 'bootstrap', 
     icon: { 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      start_date: { 
       validators: { 
        notEmpty: { 
         message: 'The start date is required' 
        }, 
        date: { 

        } 
       } 
      }, 
      finish_date: { 
       validators: { 
        notEmpty: { 
         message: 'The finish date is required' 
        }, 
        date: { 

        } 
       } 
      } 
     } 
    }) 
    .on('success.field.fv', function(e, data) { 
     if (data.field === 'start_date' && !data.fv.isValidField('finish_date')) { 
      // We need to revalidate the end date 
      data.fv.revalidateField('finish_date'); 
     } 

     if (data.field === 'finish_date' && !data.fv.isValidField('start_date')) { 
      // We need to revalidate the start date 
      data.fv.revalidateField('start_date'); 
     } 
    }); 

見表格中CodePen

Answer 1

您正在使用的日期選擇器是基於JQuery-UI datepicker，並沒有changeDate事件。

您必須使用onSelect選項才能重新驗證您的字段。

請參見下面的代碼：

// start_date 
$("#start_date").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    isRTL: true, 
    dateFormat: "mm/dd/yy", 
    // Called when a date is selected. 
    // See http://api.jqueryui.com/datepicker/#option-onSelect 
    onSelect: function(date, inst) { 
     // Revalidate the start date field 
     $('#delete_table').formValidation('revalidateField', 'start_date'); 
    } 
}); 

// finish_date 
$("#finish_date").datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    isRTL: true, 
    dateFormat: "mm/dd/yy", 
    // Called when a date is selected. 
    // See http://api.jqueryui.com/datepicker/#option-onSelect 
    onSelect: function(date, inst) { 
     // Revalidate the start date field 
     $('#delete_table').formValidation('revalidateField', 'finish_date'); 
    } 
});