Javascript 使用jQuery验证程序验证两个链接字段
我有两个可选择的元素：小时和分钟。如果一个或两个字段留空，我需要出现一个错误。我一直在使用errorPlacement函数只放置一个错误，但当您更正一个字段时，错误消失，但另一个字段仍然无效 我尝试了validator.addMethod的各种组合，但总是存在两个错误都会显示或没有错误显示等问题 以前有人遇到过这个问题吗？或者是否有人知道以正确的方式检测和处理错误的方法Javascript 使用jQuery验证程序验证两个链接字段,javascript,jquery,validation,jquery-validate,Javascript,Jquery,Validation,Jquery Validate,我有两个可选择的元素：小时和分钟。如果一个或两个字段留空，我需要出现一个错误。我一直在使用errorPlacement函数只放置一个错误，但当您更正一个字段时，错误消失，但另一个字段仍然无效 我尝试了validator.addMethod的各种组合，但总是存在两个错误都会显示或没有错误显示等问题 以前有人遇到过这个问题吗？或者是否有人知道以正确的方式检测和处理错误的方法 提前感谢。我不确定您的示例中需要哪个字段，但您可能正在寻找用于jquery验证的依赖关系表达式。例如，如果您希望仅当小时有值时
提前感谢。我不确定您的示例中需要哪个字段，但您可能正在寻找用于jquery验证的依赖关系表达式。例如，如果您希望仅当小时有值时才需要分钟，则应按如下方式设置验证：
rules: {
minutes: {
required: "#hours:filled"
}
}
jQuery.validator.addMethod("hoursMinutes", function (value, element, param) {
return $("#hours").val() != "" && $("#minutes").val() != "";
}, "Please enter both hours and minutes.");
validator.settings.rules = {
hours: { hoursMinutes: true }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var validator = $("#form1").validate({
highlight: function (element, errorClass) {
$(element).addClass("invalid");
},
unhighlight: function (element, errorClass) {
$(element).removeClass("invalid");
},
groups: { time: "hours minutes" },
errorPlacement: function (error, element) {
$("#errors").append(error);
},
messages: {
hours: { required: "Please enter both hours and minutes." },
minutes: { required: "Please enter both hours and minutes." }
},
showErrors: function (errorMap, errorList) {
this.defaultShowErrors();
if ($("#hours:filled, #minutes:filled").length == 2) {
$("#errors label").hide();
}
else {
$("#errors label").show();
}
}
});
$("#submitBtn").click(function () {
if ($("#form1").valid()) {
alert("valid");
}
return false;
});
});
</script>
<style type="text/css">
.invalid
{
border: solid 1px red;
}
</style>
</head>
<body>
<form id="form1" action="" method="post">
<div id="errors">
</div>
<input id="hours" name="hours" type="text" class="required" />
<input id="minutes" name="minutes" type="text" class="required" />
<button id="submitBtn">
Go</button>
</form>
</body>
</html>
$（文档）.ready（函数（）{
var验证程序=$（“#form1”）.validate({
突出显示：函数（元素，errorClass）{
$（元素）.addClass（“无效”）；
},
取消高亮显示：函数（元素，errorClass）{
$（元素）.removeClass（“无效”）；
},
组：{时间：“小时分钟”}，
errorPlacement:函数（错误，元素）{
$（“#错误”）。追加（错误）；
},
信息：{
小时：{必填：“请同时输入小时和分钟。”}，
分钟：{必需：“请同时输入小时和分钟。”}
},
错误：功能（错误映射、错误列表）{
this.defaultRors（）；
如果（$（“#小时：已满，#分钟：已满”）。长度==2）{
$（“#错误标签”）.hide（）；
}
否则{
$（“#错误标签”）.show（）；
}
}
});
$（“#提交”）。单击（函数（）{
if（$（“#form1”）.valid（）{
警报（“有效”）；
}
返回false；
});
});
无效的
{
边框：实心1px红色；
}
去