Javascript表单验证复选框和无线电无法工作

Question

我有一个表单，需要用javascript来验证，以确保至少选中一个复选框和一个收音机。我知道使用jQuery可能更容易，但我正在尝试使用纯javascript来实现这一点。以下是代码：

<form name="bulbform" action="compute.php"  onsubmit=" return validateForm()" method="post">
<p>Enter your name: <input type="text" name="name" size="20"></p>
<p><strong>Light Bulbs</strong></p>
<label><input type="checkbox" name="bulbs[]" value="2.39">Four 25-watt light bulbs for  $2.39</label><br>
<label><input type="checkbox" name="bulbs[]" value="4.29">Eight 25-watt light bulbs for  $4.29</label><br>
<label><input type="checkbox" name="bulbs[]" value="3.95">Four 25-watt long-life light bulbs $3.95</label><br>
<label><input type="checkbox" name="bulbs[]" value="7.49">Eight 25-watt long-life light bulbs $7.45</label><br>
<p><strong>Payment Method</strong></p>
<label><input type="radio" name="cc" value="Visa">Visa</label><br>
<label><input type="radio" name="cc" value="Master Card">Master Card</label><br>
<label><input type="radio" name="cc" value="Discover">Discover</label><br>
<p><input type="submit" value="Order" /> <input type="reset" value="Clear form"/></p></form>

这是我的javascript

  var radios = document.getElementsByTagName('input');
  var value;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
      // get value, set checked flag or do whatever you need to
      value = radios[i].value;
      alert(value);
      return true;
    }
    else{
      alert("You must select a payment method.")
      return false;
    }

删除了“其他”之后，我可以显示所选的信用卡，但是当我添加“其他”时，它总是说您必须选择一种支付方法，而且永远不会是真的。提前感谢你能给出的任何建议。

Answer 1

参见这个柱塞：https://plnkr.co/edit/5NiIA1w9axvmOJEjXVlP

function validateForm() {

  var radios = document.getElementsByTagName('input');
  var value;
  var paymentMethodSelected = false;

  for (var i = 0; i < radios.length; i++) {

    if (radios[i].type === 'radio' && radios[i].checked) {
      // get value, set checked flag or do whatever you need to
      value = radios[i].value;
      alert(value);
      paymentMethodSelected = true;
    }

  }

  if (!paymentMethodSelected) {
    alert("You must select a payment method.");
    return false;
  }

  return true;

}

• 您没有结束的form标记(不是关键，但很好的实践)
• 在检查所有单选按钮之前，您正在从验证函数返回。
• 对无效窗体状态的检查应在for循环之外处理。

Answer 2

变量radios包含复选框、文本框和单选按钮。单选按钮和文本框不是复选框。

因此，条件radios[i].type=='radio' && radios.type='checked'将评估为false，而其他部分将被评估。

如果选中任何复选框或单选按钮，下面的代码将使用变量checkedCB和checkedRadio来存储。

试着做这样的事情：

function validateForm() {
  var inputs = document.getElementsByTagName('input');
  var valued;
  var checkedCB=false,checkedRadio=false;
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
            checkedCB=true;
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
        checkedRadio=true;
    }
    if(checkedRadio && checkedCB) return true;
  }
  alert("You must select atleast one light bulb and a payment method.");
  return false;
}

您可以将属性checked放在任何一个单选按钮中。即

<label><input type="radio" name="cc" value="Visa" checked>Visa</label><br>

Answer 3

如果希望在表单提交之前至少选中一个复选框和一个收音机，则可以在脚本中引入计数器变量，以计算循环中选中的复选框和单选按钮的数量。

在返回之前，只需选中至少一个复选框和一个收音机，如下所示：

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

您的validateForm()函数完整脚本可以如下所示：

function validateForm(){
var inputs = document.getElementsByTagName('input');
var radio_checked_count=0;
var checkbox_checked_count=0;
var i;
for (i = 0; i < inputs.length; i++) {
if (inputs[i].type == "checkbox"&&inputs[i].checked) {
    checkbox_checked_count++;
}
if (inputs[i].type == "radio"&&inputs[i].checked) {
    radio_checked_count++;
}   
}  

if(checkbox_checked_count>=1&&radio_checked_count==1){
alert("Yahoo! You have successfully validated your form.")
return true;
}else{
  alert("You must select a payment method.")
  return false;
}

}