我正在尝试使用jquery的validate插件来验证表单。我想要求用户在组中至少选中一个复选框,以便提交表单。这是我的jQuery代码:
$().ready(function() {
$("#subscribeForm").validate({
rules: { list: {required: "#list0:checked"} },
messages: { list: "Please select at least one newsletter"}
});
});
这是html形式:
<form action="" method="GET" id="subscribeForm">
<fieldset id="cbgroup">
<div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div>
<div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div>
<div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit" value="submit">
问题是即使未检查任何内容,表单也将提交。我该如何解决?
最佳答案
下面的脚本可能会让您走上正确的路?
您可以将此html保持不变(尽管我将方法更改为POST):
<form method="POST" id="subscribeForm">
<fieldset id="cbgroup">
<div><input name="list" id="list0" type="checkbox" value="newsletter0" >zero</div>
<div><input name="list" id="list1" type="checkbox" value="newsletter1" >one</div>
<div><input name="list" id="list2" type="checkbox" value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit" value="submit">
</form>
这个JavaScript验证
function onSubmit()
{
var fields = $("input[name='list']").serializeArray();
if (fields.length === 0)
{
alert('nothing selected');
// cancel submit
return false;
}
else
{
alert(fields.length + " items selected");
}
}
// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)
你可以找到一个working example of it here
更新(2012年10月)
另外应注意,复选框必须具有“名称”属性,否则它们将不会添加到阵列中。仅具有“id”将不起作用。
更新(2013年5月)
将提交注册信息移到javascript并将提交信息注册到表单上(因为它本来应该是原来的)
更新(2016年6月)
将==更改为===