2017-11-01 6 views
0

Jqueryの検証は他の入力に対しては問題ありませんが、有効な入力があっても日付ピッカーが初期化されている場合はエラーメッセージは更新されません。また、要素内の値が有効な入力で選択(フォーカス)され、要素からフォーカスされている場合、エラーメッセージが消えてしまい、$(要素).select()にしようとしたのですが、 ...ここで Jqueryはdatepickerで入力に対して有効でないことを確認します

$('#date_of_birth').datetimepicker({ 
    format: 'MM/DD/YYYY', 
    language: 'en', 
    maxDate: new Date, 
    icons: { 
     time: "fa fa-clock-o", 
     date: "fa fa-calendar", 
     up: "fa fa-arrow-up", 
     down: "fa fa-arrow-down" 
    } 
}); 

が検証スクリプトです

<div class="form-group"> 
    <label for="date_of_birth" class="col-sm-4 control-label">Date of Birth <span class="input-required">*</span></label> 
     <div class="col-sm-7"> 
      <div class='input-group date' id='date_of_birth'> 
       <input type='text' class="form-control dateField" name="date_of_birth" placeholder="MM/DD/YYYY" id="date_of_birth_field" data-toggle="tooltip" data-placement="top"value=""/> 
       <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> 
      </div> 
     </div> 
</div> 

これは、それが助け場合は日付ピッカーは、初期化する方法..です欠点があった:

$.validator.setDefaults({ 
    errorClass: 'help-block', 
    errorElement: 'span', 
    focusInvalid: true, 
    ignore: ":hidden", 
    highlight: function(element, errorClass, validClass) 
    { 

     var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal'); 
     switch(fieldtype) 
     { 
     case "dateField": 
      $(element).closest('.form-group').addClass('has-error'); 
      // $(element).select(); 
      break; 
     default: 
      $(element).closest('.form-group').addClass('has-error'); 
      break; 
     } 

    }, 
    unhighlight: function(element, errorClass, validClass) 
    { 
     if($(element).hasClass('select2-offscreen')) 
     { 
     $(element).closest('.form-group').removeClass('has-error'); 
     $(element).next('span').css({display: "none"}); 
     } 

     else 
     { 
     $(element).closest('.form-group').removeClass('has-error'); 
     } 
    }, 

    errorPlacement: function (error, element) { 
      var fieldtype = ($(element).hasClass('dateField') ? 'dateField' : 'normal'); 

      switch (fieldtype) { 
       case "dateField": 
        error.appendTo(element.parent().parent()); 
        break; 
       default: 
        error.appendTo(element.parent()); 
        break; 
      } 
     } 
    }); 
$('#employee-form').validate(
    { 
    rules: { 
      date_of_birth: { 
       gbdDate: true, 
       required: true 
      } 
      }, 
    messages: { 
      date_of_birth: "Please enter valid date"; 
       } 
    }); 

私が知っている、これはすべての長さで、退屈ですが、私はできませんでしたいくつかのいずれかが、これで私を助けてください...それはJSfiddleで実行します。..

+0

オールマンスタイルのコードフォーマットではありません SparkBox

$('.dateField').datepicker({ onClose: function() { $(this).valid(); } }); 

これは、それを解決します...練習を標準化する。それは良い習慣でもありません:https://stackoverflow.com/a/11247362/594235 – Sparky

答えて

0

は私の答えが見つかりました:

ではJavaScript用
関連する問題