javascript驗證多個廣播選擇

Question

我意識到這不是一個新話題，並且已經有人問過。 我已經閱讀了各種答案，盡管我對Javascript的了解有所提高，但大多數答案還是很困惑。

我要我的用戶給一個等級，他們對一個類別和一個公司都進行評級。 我希望Javascript驗證兩組單選按鈕都標記了答案，並在可能的情況下根據未標記的警告給出單獨的警報。

我的代碼（省略了包裹它們的表）

<form action="blah.php" method="post" onsubmit="return validaterating()"
name="ratings">

<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">

<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">

</form>

Javascript：

function validaterating() {

var rate1 = document.forms.ratings.categoryrate;
var rate2 = document.forms.ratings.companyrate;

function validaterating() {
for (var i=0; i < rate1.length; i++) {
if (rate1[i].checked)
return true;
}
alert("Please rate the category.");
return false;
}

現在，我知道此方法可以驗證第一等級，並且是我認為最有意義的驗證設置。 但是，我無法驗證第二個問題（rate2）。 我使用&&運算符嘗試了另一個for循環，當我嘗試進行第二次驗證時它停止工作。 在編寫代碼時使用它，這怎么可能？

謝謝你的時間。

Answer 1

http://jsfiddle.net/R5M5Y/

的HTML

<form onsubmit="return test();" action="blah.php" method="post" name="ratings">
category:
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
company:
<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">
    <input type='submit' />
</form>

的JavaScript

function test(){
  var category = document.getElementsByName("categoryrate");
  var check1 = 0;
  for(i=0;i<category.length;i++){
    if(category[i].checked){
      check1++;
      break;
    }
  }
  var company = document.getElementsByName("companyrate");
  var check2 = 0;
  for(i=0;i<company.length;i++){
    if(company[i].checked){
      check2++;
      break;
    }
  }
  if(check1 && check2){
  }else{
    alert("you must select ratings for both company and category");
    return false;
  }
}

Answer 2

這是驗證兩組單選按鈕所需的全部JavaScript嗎？ 首先，您有兩個函數，兩個函數的名稱相同（驗證）。 其次，您忘了在末尾添加一個閉合括號以封閉包裝函數。

您應該做的是設置兩個變量，它們都充當布爾標志。 然后遍歷每組單選按鈕，以確定是否已選擇按鈕。 如果是這樣，請將相應的標志設置為true，否則為false。 然后最后，測試以查看兩個標志是否都已設置為true。 如果不是，則發出警報。

Answer 3

函數validaterating（）{

var rate1 = document.forms.ratings.categoryrate; var rate2 = document.forms.ratings.companyrate;

函數validaterating（）{對於（var i = 0; i <rate1.length; i ++）{如果（rate1 [i] .checked）返回true; } alert（“請為類別評分。”）; 返回false； }

此代碼有許多語法錯誤。 我不確定為什么有兩個驗證評分功能。 我現在要假設您錯誤地復制了它們，並且您的代碼實際上起作用了。

這里的問題是您在rate1中找到一個后返回true。 如果您在之后驗證rate2的過程中擁有任何代碼，則該函數將返回，因此不會被點擊。

一種解決方案可能是創建兩個布爾變量categoryChecked，companyChecked並將其初始化為false。 然后，針對每個i遍歷document.forms.rating.categoryrate [i] .checked，如果其中任何一個為true，則設置categoryChecked = true。 對companyChecked執行相同的操作。

然后，完成

return categoryChecked && companyChecked

Answer 4

您可以執行以下操作：

function validaterating() {
 return validateGroup(document.getElementsByName("categoryrate")) && validateGroup(document.getElementsByName("companyrate"))
}

function validateGroup(elements) {
 for (var i = 0; i < elements.length; i++) {
  if (elements[i].checked) return true;
 }
return false;
}

Answer 5

 function validateForm() { var radios = document.getElementsByTagName('input'); var value; var sum_radio=0; var formValid=0; for (var c = 0; c < radios.length; c++){ if (radios[c].type =='radio'){ sum_radio = sum_radio + 1; } } alert('count radio'+sum_radio); 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'+value); alert('good'+formValid); formValid = formValid + 1; } } if (formValid==sum_radio){ alert('yes'); return true; }else{ alert('no'); return false } } 

 <form name="form1" action="#" onsubmit="return validateForm()" method="post"> First time visitor?:<br/> <label for="s1">Yes</label> <input type="radio" id="radio0" name="yesno" value="1"/> <br/> <label for="s2">No</label> <input type="radio" id="radio1" name="yesno1" value="2"/> <br/> <label for="s2">No</label> <input type="radio" id="radio2" name="yesno2" value="2"/> <br/> <label for="s2">No</label> <input type="radio" id="radio3" name="yesno3" value="2"/> <br/> <label for="s2">No</label> <input type="radio" id="radio4" name="yesno4" value="2"/> <br/> <label for="s2">No</label> <input type="radio" id="radio5" name="yesno5" value="2"/> <br/> <input type="submit" value="Submit"><br/> </form>