2017-08-30 12 views
0

jQuery Validate Plugin(https://jqueryvalidation.org/)を使用して、IEの検証に問題があることを知りました。jQuery .validate - Internet Explorerで日付を検証する

私のルールは単純にstarttime: {required: true, date: true}ですが、私のフォーマットはDD-MMM-YYYY hh:mm a、つまり2017年8月31日9時43分です。

これは他のブラウザでも機能しますが、IEでは無効な日付だと表示されます。他のフィールドで検証が行われていることに注意してください。

ここでいくつかの素晴らしい答えがあります:Custom date format with jQuery validation pluginしかし、具体的には、どのように私の日付形式をIEで検証できますか?

私の推測では、カスタムメソッドを追加する必要がありますが、その中に何があるべきですか? RegExやカスタム日付、そしてどのように?私は、このページがdatepickerを使用し、ユーザーがデータを直接入力することができないため、日付そのものを検証せずに(例:32/01/2017)、日付の形式を検証することでRegExを検証できます。

EDIT(実際のコードを含める):

<script type="text/javascript" src="js/plugins/jquery-validate/jquery.validate.min.js"></script> 

<script> 
    $(document).ready(function(){ 

     if ($("#newinspectionform").length > 0) { 
      var validate = $("#newinspectionform").validate({ 
       errorClass: "has-error", 
       validClass: "", 
       errorElement: "span", 
       ignore: [], 
       errorPlacement: function (error, element) { 
        $(element).after(error); 
        $(element).parents(".form-group").addClass("has-error"); 
       }, 
       highlight: function (element, errorClass) { 
        $(element).parents(".form-group").removeClass("has-success").addClass(errorClass); 
       }, 
       unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".form-group").removeClass(errorClass).addClass(validClass); 
       }, 
       rules: { 
        propertyid: {required: true}, 
        type: {required: true}, 
        starttime: {required: true, date: true}, 
        endtime: {required: true, date: true} 
       } 
      }); 
     } 

    ... other stuff 
</script> 
+0

これをチェックアウトしましたか? https://stackoverflow.com/questions/4809451/date-validator-on-datepicker-trigger-false-negatives-in-ie7-ie8 –

+0

はい - そのようなものがいくつかありますが、これらの解決策は残念なことにこの状況を助けません。 – Warren

答えて

0

私は、カスタム日付方法でこれを修正しました。私のフォーマットはDD-MMM-YYYY hh:mm a、すなわち2018年8月31日9時43分にとどまる必要があったので、私はこのようにしなければなりませんでした。

$.validator.addMethod(
     "inspDateTime", 
     function(value, element) { 
      // put your own logic here, this is just a (crappy) example 
      return value.match(/^(0?[1-9]|[12][0-9]|3[0-1])[/., -](0?[1-9]|1[0-2]|[a-zA-Z]{3})[/., -](19|20)?\d{2} (0?[1-9][012]?:[0-5][0-9] [ap]m)$/); 
     }, 
     "Please enter a valid date." 
    ); 

Internet Explorerがこの日付を検証できなかった理由はわかりませんが、上記の正規表現はIEで動作します。開始正規表現のこの答えを信用してください:https://stackoverflow.com/a/17392795/2066625

0

編集:日付ピッカー

はこれを試してみてくださいインクルードします。それは、datePickerでIEで動作します。あなたはまた時間を設定しようとしていますか?もしそうなら、私はいくつかの人々がdatetimePicker用のプラグインを作成したことを知っています。

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
    <form> 
     <input type="date" class="left" id="starttime" name="starttime"> 
     <br/> 
     <input type="submit" value="Validate!"> 
    </form> 
</body> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script> 
    //datePicker Set format 
    $('#starttime').datepicker({ 
     dateFormat: 'yy-mm-dd' 
    }).datepicker("setDate", new Date()); 


    var validator = $("form").validate ({ 
     rules: { 
      starttime: {required: true, date: true} 
     }, 
     messages: { 
      starttime: "Please enter a valid start date" 
     } 
    }); 
</script> 

+0

私は質問を編集してコードを追加しました。ご覧のように、 '$(document).ready()'にラップされています。また、他のバリデーションも有効です。問題の日付だけです – Warren

関連する問題