JQuery Validate Plugin：チェックボックスのステータスに基づいてフィールドを検証する方法

Question

現在、jquery validateプラグインを使用して8つの入力を検証しようとしています。チェックボックスがオンになっているかどうかだけチェックしたいのです。

選択入力自体は、開始日時と終了日時に対応します。開始日と終了日の4つの選択入力（月、日、年、時間）があります。私がチェックしたいのは、チェックボックスがチェックされている場合、このチェックボックスは、指定されたデータがイベントの一部であるかどうかに対応しています。そうであれば、8つの選択入力が表示され、そうでない場合、バリデータはそれらのフィールドを完全にスキップする必要があります。

私が今実行している問題は、イベントチェックボックスがオンになっていて、送信ボタンがクリックされた場合、バリデーターが検証と送信を忘れることです。私が達成したいもう一つのことは、開始日が今日よりも前にあるかどうかをチェックすることです。もしそうなら、日付が無効であることを表すエラーを返すべきです。終了日の場合も、開始日以降である必要がありますが、終了日は同じです。ここで

はjavascriptのです：

**私はここでdate.js

$(document).ready(function(){ 

$.fn.hasAttr = function(name) { 
    return this.attr(name) !== undefined; 
}; 


$.validator.addMethod('vstartdate', function(value, element, param) { 

    var startMonth = $("#Start_Month").val(); 
    var startDay = $("#Start_Day").val(); 
    var startYear = $("#Start_Year").val(); 
    var startDate = Date.parse(startMonth + " " + startDay + " " + startYear); 

    var isEvent = $("#checkbox").hasAttr('checked'); 
    var isPostEvent = $('#Post_Type').val() == 1; 

    var validStartDate = (!isEvent && !isPostEvent) || startDate != null && (Date.validateMonth(startDate.getMonth()) && Date.validateYear(startDate.getFullYear()) 
    && Date.validateDay(startDate.getDate(), startDate.getFullYear(), startDate.getMonth()) && Date.today().isBefore(startDate)); 
    return validStartDate == param; 
}); 

$.validator.addMethod('venddate', function(value, element, param) { 

    var endMonth = $("#End_Month").val(); 
    var endDay = $("#End_Day").val(); 
    var endYear = $("#End_Year").val(); 
    var endDate = Date.parse(endMonth + " " + endDay + " " + endYear); 

    var isEvent = $("#checkbox").hasAttr('checked'); 
    var isPostEvent = $('#Post_Type').val() == 1; 

    var validEndDate = (!isEvent && !isPostEvent) || endDate != null && (Date.validateMonth(endDate.getMonth()) && Date.validateYear(endDate.getFullYear()) 
    && Date.validateDay(endDate.getDate(), endDate.getFullYear(), endDate.getMonth()) && endDate.isAfter(startDate)); 

    return validEndDate == param; 
}); 


$.validator.addMethod('filesize', function(value, element, param) { 
      return this.optional(element) || (element.files[0].size <= param) 
}); 

$.validator.addMethod('notEqualTo', function(value, element, param) { 
    return this.optional(element) || (value != param) 
}); 

$("#postForm").validate({ 
    rules: { 
     Title: "required", 

     Description: { 
      required: true, 
      minlength: 10 
     }, 

     Picture: { 
      required: true, 
      accept: "png|jpe?g|gif", 
      filesize: 1048576 //1MB 
     }, 

     Location_Name: { 
      required: true, 
      minlength: 2 
     }, 

     Address: { 
      required: true, 
      notEqualTo: "Add Street Address" 
     }, 

     groups: { 
      startdate: "Start_Month Start_Day Start_Year Start_Time", 
      enddate: "End_Month End_Day End_Year End_Time" 
     }, 

     Start_Month: "vstartdate", 
     Start_Day: "vstartdate", 
     Start_Year: "vstartdate", 
     Start_Time: "vstartdate", 

     End_Month: "vendtime", 
     End_Day: "vendtime", 
     End_Year: "vendtime", 
     End_Time: "vendtime", 

     errorPlacement: function(error, element) { 
      if (element.attr("name") == "Start_Month" || element.attr("name") == "Start_Day" 
      || element.attr("name") == "Start_Year" || element.attr("name") == "Start_Time") 
       error.insertAfter("#Start_Time"); 
      else 
       error.insertAfter(element); 
     }, 

    }, 
    messages: { 
     Title: "Please enter a title", 
     Description: { 
      required: "Please enter a description", 
      minlength: "Your description must consist of at least 10 characters" 
     }, 
     Picture: "File must be JPG, GIF or PNG, less than 1MB", 
     Location_Name: { 
      required: "Please enter a location name", 
      minlength: "Your location name must consist of at least 2 characters" 
     }, 
     Address: "Please enter a address", 

     Start_Month: "Month isn't valid", 
     Start_Day: "Day isn't valid", 
     Start_Year: "Year isn't valid", 
     Start_Time: "Time isn't valid", 

     End_Month: "Month isn't valid", 
     End_Day: "Day isn't valid", 
     End_Year: "Year isn't valid", 
     End_Time: "Time isn't valid", 

    } 
}); 
}); 

にネイティブ関数を使用していますhtmlです：

<div class="field"> 
       <label for="Title">Title</label> 
       <input type="text" id="Title" name="Title" /> 
      </div> 
      <div class="field"> 
       <label for="Description">Description</label> 
       <textarea id="Description" name="Description" rows="3" cols="20"></textarea> 
      </div> 
      <div class="file field"> 
       <label for="realupload">Choose an image.</label> 
       <div id="fileupload"><input type="file" name="Picture" id="Picture" /></div> 
      </div> 
      <div class="clear"></div> 
      <h2 class="event">Is this an event?</h2> 
      <p class="field switch"> 
       <label class="cb-enable"><span>Yes</span></label> 
       <label class="cb-disable selected"><span>No</span></label> 
       <input type="checkbox" id="checkbox" class="checkbox" name="field2" /> 
      </p> 
      <div class="clear"></div> 
      <div class="field eventdeets"> 
       <label for"Start_DateTime">Start date/time</label> 
       <select name="Start_Month" id="Start_Month" ><option value="" >Month</option><option value="January" >January</option><option value="February" >February</option><option value="March" >March</option><option value="April" >April</option><option value="May" >May</option><option value="June" >June</option><option value="July" >July</option><option value="August" >August</option><option value="September" >September</option><option value="October" >October</option><option value="November" >November</option><option value="December" >December</option></select><select name="Start_Day" id="Start_Day" ><option value="" >Day</option><option value="1" >1</option><option value="2" >2</option><option value="3" >3</option><option value="4" >4</option><option value="5" >5</option><option value="6" >6</option><option value="7" >7</option><option value="8" >8</option><option value="9" >9</option><option value="10" >10</option><option value="11" >11</option><option value="12" >12</option><option value="13" >13</option><option value="14" >14</option><option value="15" >15</option><option value="16" >16</option><option value="17" >17</option><option value="18" >18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option><option value="25" >25</option><option value="26" >26</option><option value="27" >27</option><option value="28" >28</option><option value="29" >29</option><option value="30" >30</option><option value="31" >31</option></select><select name="Start_Year" id="Start_Year" ><option value="" >Year</option><option value="2000" >2000</option><option value="2001" >2001</option><option value="2002" >2002</option><option value="2003" >2003</option><option value="2004" >2004</option><option value="2005" >2005</option><option value="2006" >2006</option><option value="2007" >2007</option><option value="2008" >2008</option><option value="2009" >2009</option><option value="2010" >2010</option><option value="2011" >2011</option><option value="2012" >2012</option><option value="2013" >2013</option><option value="2014" >2014</option><option value="2015" >2015</option></select><select name="Start_Time" id="Start_Time" ><option value="" selected="selected">Time</option><option value="00:00:00" >12:00am</option><option value="00:30:00" >12:30am</option><option value="01:00:00" >1:00am</option><option value="01:30:00" >1:30am</option><option value="02:00:00" >2:00am</option><option value="02:30:00" >2:30am</option><option value="03:00:00" >3:00am</option><option value="03:30:00" >3:30am</option><option value="04:00:00" >4:00am</option><option value="04:30:00" >4:30am</option><option value="05:00:00" >5:00am</option><option value="05:30:00" >5:30am</option><option value="06:00:00" >6:00am</option><option value="06:30:00" >6:30am</option><option value="07:00:00" >7:00am</option><option value="07:30:00" >7:30am</option><option value="08:00:00" >8:00am</option><option value="08:30:00" >8:30am</option><option value="09:00:00" >9:00am</option><option value="09:30:00" >9:30am</option><option value="10:00:00" >10:00am</option><option value="10:30:00" >10:30am</option><option value="11:00:00" >11:00am</option><option value="11:30:00" >11:30am</option><option value="12:00:00" >12:00pm</option><option value="12:30:00" >12:30pm</option><option value="13:00:00" >1:00pm</option><option value="13:30:00" >1:30pm</option><option value="14:00:00" >2:00pm</option><option value="14:30:00" >2:30pm</option><option value="15:00:00" >3:00pm</option><option value="15:30:00" >3:30pm</option><option value="16:00:00" >4:00pm</option><option value="16:30:00" >4:30pm</option><option value="17:00:00" >5:00pm</option><option value="17:30:00" >5:30pm</option><option value="18:00:00" >6:00pm</option><option value="18:30:00" >6:30pm</option><option value="19:00:00" >7:00pm</option><option value="19:30:00" >7:30pm</option><option value="20:00:00" >8:00pm</option><option value="20:30:00" >8:30pm</option><option value="21:00:00" >9:00pm</option><option value="21:30:00" >9:30pm</option><option value="22:00:00" >10:00pm</option><option value="22:30:00" >10:30pm</option><option value="23:00:00" >11:00pm</option><option value="23:30:00" >11:30pm</option></select>     
      </div> 
      <div class="field eventdeets"> 
       <label for"End_DateTime">End date/time</label> 
       <select name="End_Month" id="End_Month" ><option value="" >Month</option><option value="January" >January</option><option value="February" >February</option><option value="March" >March</option><option value="April" >April</option><option value="May" >May</option><option value="June" >June</option><option value="July" >July</option><option value="August" >August</option><option value="September" >September</option><option value="October" >October</option><option value="November" >November</option><option value="December" >December</option></select><select name="End_Day" id="End_Day" ><option value="" >Day</option><option value="1" >1</option><option value="2" >2</option><option value="3" >3</option><option value="4" >4</option><option value="5" >5</option><option value="6" >6</option><option value="7" >7</option><option value="8" >8</option><option value="9" >9</option><option value="10" >10</option><option value="11" >11</option><option value="12" >12</option><option value="13" >13</option><option value="14" >14</option><option value="15" >15</option><option value="16" >16</option><option value="17" >17</option><option value="18" >18</option><option value="19" >19</option><option value="20" >20</option><option value="21" >21</option><option value="22" >22</option><option value="23" >23</option><option value="24" >24</option><option value="25" >25</option><option value="26" >26</option><option value="27" >27</option><option value="28" >28</option><option value="29" >29</option><option value="30" >30</option><option value="31" >31</option></select><select name="End_Year" id="End_Year" ><option value="" >Year</option><option value="2000" >2000</option><option value="2001" >2001</option><option value="2002" >2002</option><option value="2003" >2003</option><option value="2004" >2004</option><option value="2005" >2005</option><option value="2006" >2006</option><option value="2007" >2007</option><option value="2008" >2008</option><option value="2009" >2009</option><option value="2010" >2010</option><option value="2011" >2011</option><option value="2012" >2012</option><option value="2013" >2013</option><option value="2014" >2014</option><option value="2015" >2015</option></select><select name="End_Time" id="End_Time" ><option value="" selected="selected">Time</option><option value="00:00:00" >12:00am</option><option value="00:30:00" >12:30am</option><option value="01:00:00" >1:00am</option><option value="01:30:00" >1:30am</option><option value="02:00:00" >2:00am</option><option value="02:30:00" >2:30am</option><option value="03:00:00" >3:00am</option><option value="03:30:00" >3:30am</option><option value="04:00:00" >4:00am</option><option value="04:30:00" >4:30am</option><option value="05:00:00" >5:00am</option><option value="05:30:00" >5:30am</option><option value="06:00:00" >6:00am</option><option value="06:30:00" >6:30am</option><option value="07:00:00" >7:00am</option><option value="07:30:00" >7:30am</option><option value="08:00:00" >8:00am</option><option value="08:30:00" >8:30am</option><option value="09:00:00" >9:00am</option><option value="09:30:00" >9:30am</option><option value="10:00:00" >10:00am</option><option value="10:30:00" >10:30am</option><option value="11:00:00" >11:00am</option><option value="11:30:00" >11:30am</option><option value="12:00:00" >12:00pm</option><option value="12:30:00" >12:30pm</option><option value="13:00:00" >1:00pm</option><option value="13:30:00" >1:30pm</option><option value="14:00:00" >2:00pm</option><option value="14:30:00" >2:30pm</option><option value="15:00:00" >3:00pm</option><option value="15:30:00" >3:30pm</option><option value="16:00:00" >4:00pm</option><option value="16:30:00" >4:30pm</option><option value="17:00:00" >5:00pm</option><option value="17:30:00" >5:30pm</option><option value="18:00:00" >6:00pm</option><option value="18:30:00" >6:30pm</option><option value="19:00:00" >7:00pm</option><option value="19:30:00" >7:30pm</option><option value="20:00:00" >8:00pm</option><option value="20:30:00" >8:30pm</option><option value="21:00:00" >9:00pm</option><option value="21:30:00" >9:30pm</option><option value="22:00:00" >10:00pm</option><option value="22:30:00" >10:30pm</option><option value="23:00:00" >11:00pm</option><option value="23:30:00" >11:30pm</option></select>    </div> 

この問題にどのような援助がされます非常に感謝！

Answer 1

このようなものを試してみてください。

if ($('#checkbox').is(':checked')) { 
    $("#postForm").validate({ ... }); 
} 

は、より多くの情報のためis()と:checkedを参照してください。

isEvent = $("#checkbox").hasAttr('checked');の代わりにisEvent = $('#checkbox').prop('checked');を使用してください。 prop()を参照してください。