我目前正在尝试使用jquery validate插件来验证8个选择输入。我唯一希望检查它们是否有效的方法是选中复选框。
选择输入本身对应于开始日期和时间，以及结束日期和时间。开始日期有四个选择输入，结束日期有四个选择输入（即月，日，年，时间）。我希望检查它们的唯一时间是选中复选框，此复选框对应于给定数据是否是事件的一部分。如果是，那么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>
非常感谢您对此问题的任何帮助！