Fatal编程技术网

Javascript单选按钮验证错误

javascript validation

Javascript单选按钮验证错误,javascript,validation,radio-button,Javascript,Validation,Radio Button,我无法使单选按钮验证正常工作。 复选框和文本字段没有问题，但单选按钮没有选中验证，因此页面不会继续进入成功页面 <script> window.onload =function() { document.getElementById("pie_form").onsubmit = validateForm; } function validateForm() {

我无法使单选按钮验证正常工作。 复选框和文本字段没有问题，但单选按钮没有选中验证，因此页面不会继续进入成功页面

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


window.onload=函数（）
{
document.getElementById（“pie_form”）.onsubmit=validateForm；
}
函数validateForm（）
{
var validName=validateTextBox（“饼图名称”、“错误饼图名称”）；
var validFlavor=validateFlavor（“味道”、“错误味道”）；
var validIceCream=VALIDATECHKBOX（“冰淇淋”、“错误冰淇淋”）；
//如果所有字段都有效，请转到下一页
返回validName&&validFlavor&&validIceCream；
}
函数validateTextBox（字段ID、错误ID）
{
var text=document.getElementById（fieldId）.value；
var errorSpan=document.getElementById（errorId）；
如果（文本==“”）
{
errorSpan.innerHTML=“*空白”；
return false；//停留在此页面上
}
其他的
{
errorSpan.innerHTML=“；//清除错误
返回true；//转到成功页面
}
}
函数validateFlavor（）
{
var flavor=document.getElementById（“pie_form”）.flavor；
var errorSpan=document.getElementById（“error_flavor”）；
errorSpan.innerHTML=“”；
如果（！flavor.checked）
{
errorSpan.innerHTML=“*您必须选择一种口味。”；
返回false；
}
返回true；
}
函数validateCheckBox（fieldId，errorId）
{
var checkbox=document.getElementById（fieldId）；
var errorSpan=document.getElementById（errorId）；
errorSpan.innerHTML=“”；
//如果未选中复选框，则显示错误
如果（！checkbox.checked）
{
errorSpan.innerHTML=“*您不同意吃冰淇淋？”；
返回false；
}
//如果选中return true表示其有效
返回true；
}
馅饼节！

饼图名称：



风味：


苹果

蓝莓

樱桃




你想要冰淇淋吗？
我建议您尝试使用一些jQuery并使用
：checked
选择器，如下所示：

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

    e.preventDefault()

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

        ... do ya thing...

    }else{

        $(this).submit()

    }

$（'form'）。提交（函数（e）{
e、 预防默认值（）
if（$（'input[name=flavor]：选中'）.size（）<1）{
…做你想做的事。。。
}否则{
$（this.submit（））
}
您应该真正使用jQuery，因为它是一个干净、漂亮且易于调试的工具

编辑

选择器
：checked
基本上是一个CSS选择器，因此可以通过jQuery选择器来选择选中的元素。您可以了解有关
：checked
选择器
document.getElementById（“饼图表单”）的更多信息.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;
}

函数validateFlavor（）{
var flavor=document.getElementById（“饼状”）.flavor，
errorSpan=document.getElementById（“error\u flavor”），
isChecked=false，
我
errorSpan.innerHTML=“”；
对于（i=0；i
这里有一个。

您没有为无线电元素提供任何ID，因此无法使用getelementbyid，并且无线电组提供了一个列表，因此您必须循环使用下面修改的validateflavor函数：

function validateFlavor(fieldName, errorId) {
    var errorSpan = document.getElementById(errorId);
    errorSpan.innerHTML = "";
    var flavorgroups = document.getElementsByName(fieldName)

            for (var i = 0; i < flavorgroups.length; i++) {
                if (flavorgroups[i].checked) {
                return true; // checked
            }
            };

            // not checked, show error
            errorSpan.innerHTML = '* You must pick a flavor.';
            return false;
        }

函数validateFlavor（字段名，错误ID）{
var errorSpan=document.getElementById（errorId）；
errorSpan.innerHTML=“”；
var-flavorgroups=document.getElementsByName（字段名）
对于（var i=0；i
默认情况下总是选中一个单选按钮是个好主意，但有时这并不合适。您可以将表单控件引用为表单的属性，因此
form.flavor
将返回一个名为flavor的HTMLCollection控件。然后，您可以循环查看是否选中了一个，例如

function validate(formId) {
  var form = document.getElementById(formId);
  var radios = form.flavor;
  var oneChecked = false;

  for (var i=0, iLen=radios.length; i<iLen && !oneChecked; i++) {
    oneChecked = radios[i].checked
  }

  return oneChecked;
}

功能验证（formId）{
var form=document.getElementById（formId）；
var-radios=form.flavor；
var oneChecked=false；

对于（var i=0，iLen=radios.length；iA单选按钮组是一个元素列表。您必须查看该列表，看看是否选中了其中一个元素。此外，对单选框的验证有点胡说八道，因为总是有一个选中的one@Onheiron-不，没有，尽管总是默认选择一个是个好主意。我不同意这一点默认情况下选择一个总是一个好主意。这完全取决于具体情况。为什么在这里使用jQuery？为什么在OP只需要创建一个标记并在数组中循环的情况下添加所有开销。除非有足够的理由使用jQuery，否则我不会只针对这个特定问题。这有点过头了。这是n这不是一种过分的做法，而是