Javascriptを使用して、日付によってドロップダウンメニューを検証する

Question

私のフォームの検証コードを書くのにとても親切な人がいらっしゃいますかと尋ねます。

私は「arrivaldate」と呼ばれるカレンダーとし、例えば、いくつかの申し出可能性があり、以下の項目でドロップダウンよりもフィールドを持っている：

• なし
• 白のオファー
• 黒のオファー

「到着日」が4月1日から25日までの場合のみ有効です。

黒のオファーは、 "arrivaldate"が4月20日から5月15日までの場合にのみ有効です

したがって、ユーザーが "白オファー"を選択し、 "到着日"を日付に選択して "送信"ボタンを押す場合4月1日から25日までの間に、「このオファーは選択した期間に有効ではありません」というエラーが表示されます。

私は本当にあなたの親切な助けをありがとう、私は事前に感謝します。

種類よろしく

フィリッポ

Answer 1

これを試してみてください、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"> 
<script> 
    $(document).ready(function(){ 

     $('#arrivaldate').datepicker({ 
      format: 'yyyy/mm/dd' 
     }); 

     $("#btn").on('click',function(){ 
      var arrival_date = $('#arrivaldate').val(); 
      var offer = $('#offer').val(); 
      var dateArrival = new Date(arrival_date); 
      if(arrival_date=='' || offer==''){ 
       alert('please fill the fields'); 
      } 
      if(offer == '1'){ 
       if(dateArrival <= new Date('2016-04-01') || dateArrival >= new Date('2016-04-25')){ 
        alert('White Offer Not Valid'); 
       }else{ 
        alert('White Offer Valid'); 
       } 
      }else if(offer == '2' && arrival_date!=''){ 
       if(dateArrival <= new Date('2016-04-20') || dateArrival >= new Date('2016-05-15')){ 
        alert('Black Offer Not Valid'); 
       }else{ 
        alert('Black Offer Valid'); 
       } 
      } 
     }); 
    }); 
</script> 

<form id="demoform"> 
    <div> 
     Arrival Date: <input type="text" id="arrivaldate" class="form-control" data-provide="datepicker" style="width:200px"/> 
    </div> 
    <br/> 
    <div> 
     Offers: 
     <select id="offer" class="form-control" style="width:200px"> 
      <option value="0">None</option> 
      <option value="1">White Offer</option> 
      <option value="2">Black Offer</option> 
     </select> 
    </div> 
    <br/> 
    <div> 
     <button class="btn btn-info" type="button" id="btn">Submit</button> 
    </div> 
</form>