<分区>
<分区>
我喜欢使用 jquery validate 来验证我的表单，我必须为 radio 输入使用背景图像。
下面是用于验证的 html、css 和 jquery。
我决定添加一个简单的 radio: 并将其添加到规则中，当我尝试提交表单时它会显示错误消息，仅针对该输入，但不会针对升级或路由单选字段。
这让我相信 radio 字段的 img 背景 hack 导致验证不起作用。可能是因为我有 display: none;对于 css 中的 radio 输入类型。
HTML:
<input type="radio" id="u1" name="upgrade" value="1" />
<label for="u1"><span></span></label>
CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size: 14px;
position: absolute;
top: 25px;
right: -3px;
}
input[type="radio"] + label span {
display:inline-block;
width: 38px;
height: 28px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url('../images/sub-vote-box-checkbox.png') no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url('../images/sub-vote-box-checkbox-checked.png') no-repeat;
}
JavaScript:
$("#vote-route-upgrade-form").validate({
rules: {
route: {
required: true,
},
upgrade: {
required: true,
},
},
submitHandler: function() {
$('#vote-modal').modal('hide');
$('#thanks-modal').modal('show');
}
});
最佳答案
参见 this answer (并为其点赞 :))。
带有 display:none 的元素会被 validate 插件忽略。
关于jquery validate radio input with css background hack，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21295447/