フォームに 3 つの日付ピッカー (開始日、終了日、期日) があり、選択された日付がそれぞれの代替フィールドに出力されます。日付ピッカー自体ではなく、altfields の値を検証する日付検証ルールを設定しています (日付ピッカーで検証を試みましたが、何もしませんでした)。
唯一のルールは、必須であり、終了日と期日は開始日より後にする必要があるということです。
startdate と等しい endate または duedate を選択すると、送信ボタンをクリックするか、altfield にフォーカスを移してからクリックするまで、期待どおりの検証エラーが発生しません (フォーカスが失われます)。
日付ピッカーで日付が選択されたときにこれらの入力を手動で検証する方法はありますか?
ここにデモがあります
コードは次のとおりです。
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}.');
});