如何在提交时验证多个复选框
How can I validate more than one checkbox on submission?
我有两组复选框,分别命名为pizzaBase和pizzaTopping。我想验证我的表格,以便在提交时至少选择1个基础和顶部。
function main() {
var form = document.getElementById('formname');
form.addEventListener('submit', validate);
}
function validate(event) {
var form = document.getElementById('formname');
if(!form.pizzaBase.checked) {
alert("select a base");
event.preventDefault();
}
else if(!form.pizzaTopping.checked) {
alert("select topping");
event.preventDefault();
}
else {
return true;
}
}
问题
- 若语句有效,则仅限于第一个
- 如果选中复选框,然后在之前取消选中,则表单提交true提交
- 无法验证,无法工作
我哪里错了?
感谢GG指出JS是有效的,如果有人不介意纠正我的话,我下面有HTML。我基本上有两个相同版本的下面的代码,一个用于底部,另一个用于顶部。
**
HTML
**
<section>
<h2> Bases </h2>
<p><input type="checkbox" name="pizzaBase" data-price="1.00" data-human-desc = "Small" value="Small"> Small (£1.00) </p>
<p><input type="checkbox" name="pizzaBase"data-price="1.50" data-human-desc = "Medium" value="Medium"> Medium (£1.50) </p>
<p><input type="checkbox" name="pizzaBase" data-price="2.50" data-human-desc = "Large"value="Large"> Large (£2.50) </p>
<p><input type="checkbox" name="pizzaBase" data-price="3.50" data-human-desc = "XLarge"value="XLarge"> XLarge (£3.50) </p>
</section>
不确定我是否应该在这里单独问一个问题,但这是我混乱的HTML。是分段吗?我试图把每组复选框(底部、顶部)分成两个单独的部分,所以使用了这个标签。
有什么想法吗?
当您有多个具有相同名称的输入时,form.elementName
将是一个类似数组的元素列表。
该列表将没有checked
属性。里面的每一项都会。
您需要在列表上循环并检查是否检查了任何元素。
function areAnyChecked(list) {
for (var i = 0; i < list.length; i++) {
if (list[i].checked) {
return true;
}
}
return false;
}
if(! areAnyChecked(form.pizzaBase)) {
...
相关文章:
- angularjs复选框验证至少两个
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- Javascript复选框验证:如果用户没有't选中特定复选框
- 复选框验证错误
- 简单的 JavaScript 复选框验证
- 没有表单的 jQuery 复选框验证
- 动态创建的复选框验证在 jquery 中无法正常工作
- 如何使用jQuery验证插件根据输入类型=文本/单选/复选框验证表单
- 多个复选框验证 JavaScript
- jQuery 使用样式化的无线电和复选框验证插件
- 单击“继续”按钮之前的复选框验证
- javascript多复选框验证
- 单个复选框的javascript中的复选框验证失败
- MVC 3复选框验证
- Javascript:动态表单复选框验证
- Javascript复选框验证与多个复选框的值卡住
- 复选框验证码
- 复选框验证不起作用
- JQuery验证-复选框验证不发送所有值
- 多个复选框验证