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;
    }

刪除else以后，我可以顯示所選的信用卡，但是當我添加else時，它總是顯示您必須選擇一種付款方式，而且永遠都不正確...謝謝您提供的任何建議。

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循環外for

Answer 2

可變radios包含復選框，文本框，和單選按鈕。 單選按鈕和文本框不是復選框。
因此條件radios[i].type=='radio' && radios.type='checked'評估結果為false ，而else部分將被評估。

下面的代碼使用變量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

如果您想確保在提交表單之前至少選中了一個復選框和一個單選按鈕，則可以在腳本中引入counters變量，該變量將計算循環中選中了多少個復選框和單選按鈕。

在返回之前，只需檢查至少一個復選框和一個選中的收音機，如下所示：

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語句並警告您必須選擇卡或其他任何東西。 然后它命中return false語句並退出循環（無論返回什么，return語句都會退出循環）。 就這樣。

如果您使用選中的屬性選中了第一個復選框，它將發現第一個單選按鈕已選中，然后發出警報並退出循環，而無需檢查其余復選框。 如果要編輯它，則不會在問題中關閉您的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;
  }
}