Javascript單選按鈕驗證錯誤

我無法使單選按鈕驗證正常工作。複選框和文本框都沒有問題，但單選按鈕沒有經過驗證，因此頁面沒有繼續進入成功頁面。Javascript單選按鈕驗證錯誤

<script> 
     window.onload =function() 
     { 
      document.getElementById("pie_form").onsubmit = validateForm; 
     } 

     function validateForm() 
     { 
      var validName = validateTextBox("pie_name", "error_pie_name"); 
      var validFlavor = validateFlavor("flavor", "error_flavor"); 
      var validIceCream = validateCheckBox("ice_cream", "error_ice_cream"); 

      //if all fields validate go to next page 
      return validName && validFlavor && validIceCream; 
     } 

     function validateTextBox(fieldId, errorId) 
     { 
      var text = document.getElementById(fieldId).value; 
      var errorSpan = document.getElementById(errorId); 

      if(text == "") 
      { 
       errorSpan.innerHTML = "* blank"; 
       return false; //stay on this page 
      } 
      else 
      { 
       errorSpan.innerHTML = ""; //clear the error 
       return true; //go to success page 
      } 
     } 


     function validateFlavor() 
     { 
      var flavor = document.getElementById("pie_form").flavor; 
      var errorSpan = document.getElementById("error_flavor"); 
      errorSpan.innerHTML = ""; 

      if(!flavor.checked) 
      { 
       errorSpan.innerHTML = "* You must pick a flavor."; 
       return false; 
      } 

      return true; 
     } 

     function validateCheckBox(fieldId, errorId) 
     { 
      var checkbox = document.getElementById(fieldId); 
      var errorSpan = document.getElementById(errorId); 
      errorSpan.innerHTML = ""; 

      //if you didn't check the checkbox show error 
      if(!checkbox.checked) 
      { 
       errorSpan.innerHTML = "* You didn't agree to have Ice Cream?"; 
       return false; 
      } 

      //if you checked return true to say its valid 
      return true; 
     } 

    </script> 
</head> 
<body> 
    <h1>Pie Festival!</h1> 

    <form id="pie_form" action="pie_success.html"> 
     <p> 
      <label>Pie Name: 
       <input type="text" id="pie_name" name="pie_name"> 
      </label> 
      <span id="error_pie_name" class="error"></span> 
     </p>    
     <p> 
      Flavor: 
      <span id="error_flavor" class="error"></span><br> 
      <label><input type="radio" name="flavor" value="apple">Apple</label><br> 
      <label><input type="radio" name="flavor" value="blueberry">Blueberry</label><br> 
      <label><input type="radio" name="flavor" value="cherry">Cherry</label><br> 
     </p> 
     <p> 
      <label> 
       <input type="checkbox" id="ice_cream" name="ice_cream"> 
       Do you want Ice Cream? 
      </label> 
      <span id="error_ice_cream" class="error"></span> 
     </p> 

     <input type="submit" name="continue" value="Continue"> 
    </form>

來源

2013-05-19 Sage K

單選按鈕組是元素的*列表*。您必須查看列表並查看是否檢查了其中一個單獨的元素。 – Pointy

在收音機上的驗證也是有點廢話，因爲總是有一個被選中的 – Onheiron

@ Onheiron-no，沒有，儘管默認情況下總是有一個選項是個好主意。 – RobG

document.getElementById("pie_form").flavor返回一個數組。您需要創建一個像isChecked設置爲false的變量，循環訪問該數組，並在選中某個單選按鈕時將變量設置爲true。然後繼續寫你的腳本。

此代碼：

function validateFlavor() { 
    var flavor = document.getElementById("pie_form").flavor, 
     errorSpan = document.getElementById("error_flavor"), 
     isChecked = false, 
     i; 

    errorSpan.innerHTML = ""; 

    for (i = 0; i < flavor.length; i += 1) { 
     if (flavor[i].checked) { 
      isChecked = true; 
      break; 
     } 
    } 

    if (!isChecked) { 
     errorSpan.innerHTML = "* You must pick a flavor."; 
     return false; 
    } 

    return true; 
}

而且這裏有一個fiddle。

來源

2013-05-19 22:24:40

你在'文件後停止閱讀了嗎？的getElementById（...）'？在他通過id選擇元素後，他進一步指定'.flavor'。由於有三個名稱爲「flavor」的元素，所以返回一個由三個元素組成的數組。我同意使用'getElementsByName（）'更有意義，但我選擇不更改OP在其代碼中使用的方法。 –

謝謝，我知道這是我錯過的簡單事情。另外我是一個女孩。 –

我建議你嘗試使用一些jQuery和使用:checked選擇這樣的：

$('form').submit(function(e){ 

    e.preventDefault() 

    if($('input[name=flavor]:checked').size() < 1){ 

     ... do ya thing... 

    }else{ 

     $(this).submit() 

    }

你應該使用jQuery，因爲它是一個乾淨漂亮，更容易調試。

HERE THE WORKING FIDDLE

編輯

選擇器:checked基本上因此可用於選擇由jQuery選擇所檢查的元件的CSS選擇。你可以瞭解更多關於:checked選擇器here

來源

2013-05-19 22:19:36 Onheiron

爲什麼在這裏使用jQuery？當OP需要做的是創建一個標記並通過一個數組循環時，爲什麼要添加所有這些開銷。除非有足夠的理由來使用jQuery，否則我不會僅僅針對這個特定的問題。這有點矯枉過正。 –

這不是一個矯枉過正的行爲，它採用了最新的功能，它極大地改善了代碼的清晰度和可讀性，並且通過使用自然的CSS選擇器，提供了一種簡單而不那麼冗長的方式來訪問特定的DOM元素。至於開銷，對我來說似乎並不是一個問題，不像一大堆KB會拖延一個頁面加載，至於代碼，只有一個

相關問題

Javascript單選按鈕驗證錯誤

回答

相關問題