带有altfields的jQuery UI Datepicker:验证不触发，何时应触发 [英] jQuery UI Datepicker with altfields: Validation not firing when it should
问题描述
我的表单上有3个日期选择器(开始日期，结束日期和到期日期)，并且选择的日期打印在它们各自的高度域中.我有日期验证规则设置，用于验证altfields中的值，而不是datepickers本身(我尝试对datepickers进行验证，但没有执行任何操作).
I have 3 datepickers (startdate, enddate and duedate) on my form and the dates that are picked are printed in their respective altfields. I have the date validation rules setup to validate the values in the altfields and not the datepickers themselves (I tried validating on the datepickers but it did nothing).
唯一的规则是必需的，并且结束日期和截止日期必须大于开始日期.
The only rules are the they are required and that the enddate and duedate must be greater than the startdate.
如果我选择的终止日期或截止日期等于开始日期，那么在单击提交"按钮或将焦点移到高度域"之前，我不会收到预期的任何验证错误.
If I pick an endate or duedate that is equal to the startdate I don't get any validation errors as expected until I click the submit button or if I give focus to the altfield then click away (focus lost).
在日期选择器中选择一个日期时，是否可以手动验证这些输入?
Is there a way to manually validate these inputs when a date is selected in the datepicker?
这是演示
这是代码:
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}.');
});
推荐答案
引用OP :是否有一种方法可以手动验证这些输入...?"
Quote OP: "Is there a way to manually validate these inputs... ?"
使用.element()以编程方式触发对单个元素的验证测试.
Use .element() to programmatically trigger a validation test on a single element.
$("#myform").validate().element("#myfield");
http://docs.jquery.com/Plugins/Validation/Validator /element#element
演示: http://jsfiddle.net/vMNsy/
此演示演示了如何使用.element()在DOM ready事件的第一个字段上触发验证测试.您可以使用自己的自定义事件或函数来调用它.
This demo shows how .element() is used to trigger a validation test on the first field on the DOM ready event. You can call it with your own custom event or function.
有关更多具体内容，请参见此答案...
See this answer for something more specific...
https://stackoverflow.com/a/4635640/594235
$("#myfield").datepicker({
onClose: function() {
$("myform").validate().element("#myfield");
}
});
编辑:根据评论，onClose事件不适用于OP，但保留代码以利于他人.
Edit: As per comments, onClose event is not applicable to OP, but leaving code in place for the benefit of others.
这篇关于带有altfields的jQuery UI Datepicker:验证不触发，何时应触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
