JQuery Validate Plugin : 확인란의 상태에 따라 필드의 유효성을 검사하는 방법

Question

현재 jquery 유효성 검사 플러그인을 사용하여 8 개의 선택 입력을 확인하려고합니다. 내가 유효한지 확인하기를 원하는 유일한 시간은 체크 박스가 체크 된 경우입니다.

선택 입력 자체는 시작 날짜와 시간 및 종료 날짜와 시간에 해당합니다. 시작일과 종료일 (예 : 월, 일, 년, 시간)에 대해 4 개의 선택 입력이 있습니다. 내가 체크하고 싶은 유일한 시간은 체크 박스가 체크되어 있다면,이 체크 박스는 주어진 데이터가 이벤트의 일부인지 아닌지에 해당한다. 그렇다면 8 개의 선택 입력을 볼 수 있습니다. 그렇지 않으면 유효하지 않으며 유효성 검사기는 해당 필드를 완전히 건너 뜁니다.

현재 실행중인 문제는 이벤트 체크 박스가 선택되어 있고 제출 버튼을 클릭하면 유효성 검사기가 유효성 검사를 수행하지 않고 제출하는 것입니다. 내가 성취하고자하는 또 다른 일은 시작 날짜가 오늘 전에 있는지 확인하는 것입니다. 그렇다면 날짜가 유효하지 않다는 오류를 반환해야합니다. 끝 날짜의 경우에는 시작 날짜 또는 그 이후 여야합니다. 내가 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()을 참조하십시오.