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

请参阅此plunker：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;
}

} 

Answer 4

这是你的javascript正在做的事情。

它检查第一个单选按钮，发现它未被检查，因此它执行else语句并警告您必须选择卡或其他任何东西。然后它命中返回false语句并退出循环（无论它返回什么并不重要，返回语句将退出循环）。这就是全部。

如果您使用选中的属性检查了第一个复选框，则会发现第一个单选按钮被选中，然后提醒它并返回循环而不检查其余部分。如果要编辑它，for循环不会在问题中关闭。

Answer 5

您应该在for循环后提示用户选择付款，请尝试以下代码段：

function validateForm() {
  var payments = document.getElementsByName("cc");
  var count = payments.length;
  var selected = false;
  while (count--)
    if (selected = payments[count].checked)
      break;
  if (!selected) {
    alert('Choose payment method');
    return false;
  }
  return true;
}

<form name="bulbform" action="compute.php" onsubmit=" return validateForm()" method="post">
  <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>

Answer 6

感谢Mahesh Bansod的帮助，我使用了他们的例子并根据我的需要进行了调整。下面是我的文本框，复选框和广播的工作验证代码。

function validateForm(){
  //check to make sure the name is not blank
  var cusName = document.forms["bulbform"]["name"].value;
  if (cusName == null || cusName == ""){
    alert("Your name must be filled out.");
    return false;
  }
  //check to see that atleast one radio and checkbox are checked
  var inputs = document.getElementsByTagName('input');
  var checkCheckBox=false, checkRadio=false; //set both rado and checkbox to false
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'checkbox' && inputs[i].checked) {
      checkCheckBox=true; //set checkbox true if one is checked
    }
    else if(inputs[i].type == 'radio' && inputs[i].checked) {
      checkRadio=true; //set radio true if one is checked
    }
    if(checkRadio && checkCheckBox) return true; //if both are true return true
  }
  //if checkbox is false alert user and return false
  if(!checkCheckBox){
    alert("You must select atleast one item.");
    return false; //
  }
  //if radio is false alert user and return false
  if(!checkRadio){
    alert("You must select a payment method.");
    return false;
  }
}