我有两个性别复选框。男性和女性。我将如何设置我的验证至少一个性别应选择。我也有一周的天数,从周一到周日。它也至少是一个选择的日子。这是我的jquery
$(document).ready(function(){
// --- set required message --- //
var msg="";
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid =function(e) {
if (!e.target.validity.valid) {
switch(e.target.name){
case 'gender' :
e.target.setCustomValidity("Please select at least one gender.");break;
case 'days' :
e.target.setCustomValidity("Please select at least one day.");break;
case 'location' :
e.target.setCustomValidity("Please enter a location where the image can be seen.");break;
default : e.target.setCustomValidity("");break;
}
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity(msg);
};
}
});
<input type=checkbox name=gender[] required>Male
<input type=checkbox name=gender[] required>Female
<input type=checkbox name=days[] required>Monday
<input type=checkbox name=days[] required>Tuesday
<input type=checkbox name=days[] required>Wednesday
<input type=checkbox name=days[] required>Thursday
<input type=checkbox name=days[] required>Friday
<input type=checkbox name=days[] required>Saturday
<input type=checkbox name=days[] required>Sunday
而不是使用html5要求和有效性…你可以使用jquery来查看复选框是否被选中。
if($("input[name='gender[]']").is(":checked").length < 1){
// no gender selected..
var errmsg = $("<div class='error'>Please select at least one gender</div>");
}
if($("input[name='days[]']").is(":checked").length < 1){
// no day selected..
var errmsg = $("<div class='error'>Please select at least one day</div>");
}
$("containerelement").append(errmsg);
if($("input[name='gender[]']:checked").length > 0){
}
这应该可以做到,但不确定它是否喜欢名称中的[]。
基本上告诉jquery获取所有已被选中的名称为gender[]的输入。你所要做的就是检查长度
你可以在jquery中使用:checked
查看这个示例jquery API文档:checked
var n = $( "input:checked" ).length;
有了这个,你可以检查知道你想要的输入的数量,你必须根据你正在验证的情况应用输入,使用jquery中的类选择器