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单选按钮验证错误

回答

相关问题