Javascript单选按钮验证错误

Javascript Radio Button Validation Error

本文关键字：错误 验证 单选按钮 Javascript      更新时间：2023-09-26

我无法使单选按钮验证正确工作。复选框和文本框没有问题，但是单选按钮没有勾选验证，因此页面没有继续到成功页面。

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

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

还有小提琴

我建议你尝试使用一些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基本上是一个CSS选择器，因此可以使用jQuery选择器来选择选中的元素。您可以在这里了解更多关于:checked选择器的信息

您没有为无线电元素提供任何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;
        }

默认选中一个单选按钮是个好主意，但有时不适合。您可以将表单控件作为表单的属性引用，因此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;
}
相关文章：