無効な日付の2フィールドの送信フォームをブロック

Question

私の問題を解決するにはいくつかの助けが必要です。 > 12/2010（mm/yyyy）のようなマスク（http://digitalbush.com/projects/masked-input-plugin/）を持つ2つの入力フィールドがあります。

日付が有効なときにフォームを登録したり空白のままにしたり、日付が無効なときにdivにアラートを送信してもらいたい。

1つのフィールドがある場合はうまくいきますが、2つのフィールドがある場合、2番目のフィールドに有効な日付を入力するとフォームを登録できます。

エルス

、あなたは開始日の前にすることができ、終了日を制限する任意のアイデアを持っている場合は...任意の助け

感謝;）

私のHTMLコード：

<form id="blockdate"> 
<div>date start: <input class="date" type="text"></div> 
<div>date end: <input class="date2" type="text"></div> 
<div><input class="submit" type="submit"></div> 
<div id="msg"></div> 
</form> 

私のJSコード：

 function verifyDate(datevalue) { 

     var done = false; 

     if(datevalue != null || datevalue != ''){ 
     var tmp = datevalue.split('/'); 
     var month = tmp[0]; 
     var year = tmp[1]; 

     if(month >= 1 && month <= 12){ 
     if(year >= 1990 && year <= 2099){ 
      clean(); 
      done = true; 
      } 
      else { 
      $('#msg').html('Year invalid 1900 - 2099.'); 
      } 
     } else { 
      $('#msg').html('Month invalid'); 
     }  
    } if (datevalue < 1) { 
     done = true; 
    } 

    return done; 
    } 
function verifyDate2(datevalue2) { 

     var done = false; 

     if(datevalue2 != null || datevalue2 != ''){ 
     var tmp = datevalue2.split('/'); 
     var month = tmp[0]; 
     var year = tmp[1]; 

     if(month >= 1 && month <= 12){ 
     if(year >= 1990 && year <= 2099){ 
      clean(); 
      done = true; 
      } 
      else { 
      $('#msg').html('Year invalid 1900 - 2099.'); 
      } 
     } else { 
      $('#msg').html('Month invalid'); 
     }  
    } if (datevalue2 < 1) { 
     done = true; 
    } 

    return done; 
    } 



    function clean() { 
    $('#msg').html(''); 
    } 

    jQuery(function($) { 
    $(".date").mask("99/9999"); 

     $('.blockdate').submit(function() { 
      var datevalue = $('.date').val(); 
      var datevalue2 = $('.date2').val(); 
      return verifyDate(datevalue); 
     }); 

     $(".date").change(function(){ 
     var datevalue = $(this).val(); 
      if(datevalue.length == 7) { 
      verifyDate(datevalue); 
      } else { 
      clean(); 
      } 
     }); 


    jQuery(function($) { 
    $(".date2").mask("99/9999"); 

     $('.blockdate').submit(function() { 
      var datevalue2 = $('.date2').val(); 
      return verifyDate2(datevalue2); 
     }); 

     $(".date2").change(function(){ 
     var datevalue2 = $(this).val(); 
      if(datevalue2.length == 7) { 
      verifyDate2(datevalue2); 
      } else { 
      clean(); 
      } 
     }); 

    }); 

    }); 

Answer 1

私はちょっとした正規表現を提供することであなたの仕事を少し簡略化できます。

`^([0]?\d|1[0-2])/(199\d|20\d{2})$` 

それは最初の部分を乗り切るcheckesこのよう

function TestDate(input) { 
    var pattern = /^([0]?\d|1[0-2])\/(199\d|20\d{2})$/; 
    return pattern.test(input); 
} 

それを使用する、つまりは1と12と1990年と2099年

EDIT

間の第二の部分の間にあります

フォーマットの正しさをテストした後、次のように範囲を見ることができます

function RangeOk (lowerDate, upperDate) { 
    return GetNumeric(lowerDate) < GetNumeric(upperDate); 
} 

function GetNumeric(input) { 
    var parts = input.split("/"); 
    var yearNum = parseInt(parts[1]) * 12; 
    // Get rid of leading 0 if exists 
    // It can be there as the pattern above allows it. 
    yearNum += parseInt(parts[0].replace(/0(\d)/, "$1")); 
    return yearNum; 
} 

小さな数学のトリックがあります。

は

Answer 2

1. あなたは、すべてのフォームフィールドが有効になるまで、両方の入力値が有効であれば、$(input).blur()確認の上、それ$("submit").prop("disabled",true);

2. を有効にする、送信ボタンを無効にしてから始めることができます。

3. 両方の年の値を取得し、それらを比較：startdate <= enddate

拡張送信ボタンを有効にする：

if(datevalue2 != null || datevalue2 != '') =>||おそらく&& =>でなければなりませんが、書き込むことができますとして：if(!datevalue2)

var datevalue2 = $('.date2').val(); 
      return verifyDate2(datevalue2); 

=>return verifyDate2($('.date2').val())

EDIT：あなたは一つだけの機能を検証する必要がある

、彼らは同じです。正規表現でのあなたの説明のための おかげで、

if(year >= 1990 && year <= 2099){ 
     clean(); 
     done = true; 
     $(".submit").prop("disabled",false); 
     } 

    else { 
     $('#msg').html('Year invalid 1900 - 2099.'); 
     $(".submit").prop("disabled",true); 
     } 
    } else { 
     $('#msg').html('Month invalid'); 
     $(".submit").prop("disabled",true); 
    }