我有一个包含元素#a
,#b
和#c
的表单。我需要执行的验证需要#a || (#b && #c)
(即填写#a
或#b
和#c
或全部三者。我有required
和依赖项工作:
$(document).ready(function() {
var AorBandC = function() {
var hasA = $("#a").val().trim().length > 0;
var hasBandC = $("#b").val().trim().length > 0 &&
$("#c").val().trim().length > 0;
return !(hasA || hasBandC);
};
var validator = $("#myform").validate({
validClass: "valid",
errorClass: "invalid",
rules: {
a: {
required: AorBandC
},
b: {
required: AorBandC
},
c: {
required: AorBandC
}
},
messages: {
a: "",
b: "",
c: ""
}
});
// this code manually validates all related controls
$("#a").keyup(function() {
validator.element("#b");
validator.element("#c");
});
$("#b").keyup(function() {
validator.element("#a");
validator.element("#c");
});
$("#c").keyup(function() {
validator.element("#a");
validator.element("#b");
});
$("#myform").valid();
});
input.invalid {
border: 1px solid gray;
border-left: 4px solid red;
padding-left: 6px;
}
input.valid {
border: 1px solid gray;
border-left: 4px solid green;
padding-left: 6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<form action="#" method="post" id="myform">
A <input type="text" id="a" name="a" />
<br/>
B <input type="text" id="b" name="b" />
<br/>
C <input type="text" id="c" name="c" />
<br/>
<input type="submit" text="Submit" />
</form>
我遇到的问题是,只要我有一个有效的输入,我想将所有现在的可选输入显示为有效,但这只能通过Tabbing或者代码来手动显示最后,感觉有点像黑客。 keypress
和keydown
存在的问题是,非活动元素只会在第二次击键时得到验证,而change
只会在模糊时触发,这两种情况都不会更新,直到用户标签超出输入元素。
当然有更好的方法来实现同样的目标吗? require_from_group
方法似乎无法处理这种情况。