【发布时间】：2013-02-12 14:31:00
【问题描述】：
我的表单上有 3 个日期选择器（开始日期、结束日期和截止日期），并且选择的日期打印在它们各自的替代字段中。我设置了日期验证规则来验证替代字段中的值，而不是日期选择器本身（我尝试在日期选择器上进行验证，但它什么也没做）。
唯一的规则是它们是必需的，并且结束日期和到期日期必须大于开始日期。
如果我选择了与 startdate 相同的 endate 或 duedate，则在单击提交按钮之前，我不会收到任何预期的验证错误，或者如果我将焦点放在 altfield 上然后单击离开（焦点丢失）。
有没有办法在日期选择器中选择日期时手动验证这些输入？
这里是demo
代码如下：
HTML：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Goals</title>
<link rel="stylesheet" type="text/css" href="../style/jquery-ui-1.9.2.custom.min.css"
/>
<script src="../include/jquery.validate.min.js" type="text/javascript"></script>
<style type="text/css">
* {
font-family: Verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {
clear: both;
}
.submit {
margin-left: 12em;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
.ui-widget {
font-size: 1em;
}
.ui-slider-horizontal {
display: inline-block;
width: 30em;
}
.ui-slider-vertical {
display: inline-block;
float: left;
margin: 0em 2em 1em 0em;
}
</style>
<form id="newusergoal" method="post">
<fieldset>
<legend>Add a New Goal</legend>
<label for="startdate">Start Date:</label>
<br/>
<div id="startdateselect"></div>
<br/>
<br/>
<input type="text" name="startdate" id="startdate" readonly="true" />
<br/>
<br/>
<br/>
<label for="enddate">End Date:</label>
<br/>
<div id="enddateselect"></div>
<br/>
<br/>
<input type="text" name="enddate" id="enddate" readonly="true" />
<br/>
<br/>
<br/>
<label for="duedate">Due Date:</label>
<br/>
<div id="duedateselect"></div>
<br/>
<br/>
<input type="text" name="duedate" id="duedate" readonly="true" />
<br/>
<br/>
<br/>
<input type="submit" name="submit" id="submit" value="Save New Goal" />
</fieldset>
</form>
js:
$(document).ready(function () {
$("#newusergoal").validate({
rules: {
startdate: {
required: true
},
enddate: {
required: true,
greaterThan: "#startdate"
},
duedate: {
required: true,
greaterThan: "#startdate"
}
},
messages: {
startdate: {
required: "Goal must have a start date"
},
enddate: {
required: "Goal must have an end date",
greaterThan: "End date must be greater than the start date"
},
duedate: {
required: "Goal must have an due date",
greaterThan: "Due date must be greater than the start date"
}
}
});
$("#startdateselect").datepicker({
minDate: 0,
maxDate: "10Y",
dateFormat: "yy-mm-dd",
hideIfNoPrevNext: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
altField: "#startdate"
});
$("#enddateselect").datepicker({
minDate: 0,
maxDate: "10Y",
dateFormat: "yy-mm-dd",
hideIfNoPrevNext: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
altField: "#enddate"
});
$("#duedateselect").datepicker({
minDate: 0,
maxDate: "10Y",
dateFormat: "yy-mm-dd",
hideIfNoPrevNext: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
altField: "#duedate"
});
jQuery.validator.addMethod(
"greaterThan",
function (value, element, params) {
if (!/Invalid|NaN/.test(new Date(value))) {
return new Date(value) > new Date($(params).val());
}
return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val()));
},
'Must be greater than {0}.');
});
【问题讨论】：
-
请将您的代码精简到显示问题并构建 jsFiddle 演示所需的最低限度。 “手动”验证是什么意思？
-
jsfiddle 演示正在进行中，请稍候。
-
请查看您的 jsFiddle 是如何构建的。您没有将
<head>部分放入 HTML 窗格中，仅将body内容放入。外部文件被包含在左侧面板中，CSS 被插入到 CSS 面板中。
标签： jquery jquery-ui jquery-validate jquery-ui-datepicker