javascript中的单选按钮验证答案

【问题标题】：Radio button validation in javascriptjavascript中的单选按钮验证
【发布时间】：2012-05-07 12:28:00
【问题描述】：

需要验证单选按钮输入，即当按下提交按钮并且没有选择单选按钮时，它会提醒用户说“请选择一个复选框”，如果已选择单选按钮，则只需提交表单，不需要提醒。

为此只能使用 HTML CSS 和 JavaScript，我知道它在 jquery 中要容易 1000 倍，但遗憾的是我不能使用它。

而且我知道我的 HTML 无效，但除非它直接影响到我当前的问题，否则我会稍后处理。

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/>
            <label for="s1">Yes</label>
            <input type="radio" id="1" name="yesno" value="1"/>
            <br/>
            <label for="s2">No</label>
            <input type="radio" id="1" name="yesno" value="2"/>

            <br/>       

    <input type="submit" value="Submit"><br/>
    </form>

非常感谢任何指针，谢谢。

【问题讨论】：

您删除了您的问题以重新制作相同的问题，因为另一个问题的 cmets 为负数？顺便说一句，无效标记（如重复 ID）确实直接影响您当前的问题。
注意：ids不应该以数字开头
@benji 请发布您的 validateForm 函数。

标签： javascript validation client-side-validation

【解决方案1】：

第一：如果你知道你的代码不正确，你应该在做任何事情之前修复它！

你可以这样做：

function validateForm() {
    var radios = document.getElementsByName("yesno");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    if (!formValid) alert("Must check some option!");
    return formValid;
}

查看实际操作：http://jsfiddle.net/FhgQS/

【讨论】：

该脚本应该适用于超过 2 个单选按钮，不是吗？我正在使用您的代码，但我收到一个错误，即 validateForm() 未定义？您认为是什么原因造成的？
我发现了问题所在。我从 jsFiddle 复制了它并添加了导致我的代码出错的隐藏字符。这是包含更多详细信息的页面stackoverflow.com/questions/4404526/…
我会将行 if (radios[i].checked) formValid = true; 更改为 if (radios[i].checked) { formValid = radios [i].值； } 所以它变成了选中项的值。这样您就可以知道检查了哪个项目。此外，即使只有一项，也要始终使用大括号。

【解决方案2】：

使用 javascript 的完整验证示例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio button: full validation example with javascript</title>
        <script>
            function send() {
                var genders = document.getElementsByName("gender");
                if (genders[0].checked == true) {
                    alert("Your gender is male");
                } else if (genders[1].checked == true) {
                    alert("Your gender is female");
                } else {
                    // no checked
                    var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
                return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
            }
        </script>
    </head>
    <body>
        <form action="" method="POST">
            <label>Gender:</label>
            <br />
            <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
            <br />
            <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
            <br />
            <div id="msg"></div>
            <input type="submit" value="send>>" onclick="return send();" />
        </form>
    </body>
</html>

问候，

费尔南多

【讨论】：

【解决方案3】：

你可以这样做

var option=document.getElementsByName('yesno');
     
if (!(option[0].checked || option[1].checked)) {
    alert("Please Select Your Gender");
    return false;
}

【讨论】：

【解决方案4】：

<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">

    <div class="text-input">
        <label>Gender: </label>
        <input class="form-control" type="radio" name="gender" id="male" value="male" />
        <label for="male">Male</label>
        <input class="form-control" type="radio" name="gender" id="female" value="female" />
        <label for="female">Female</label>
    </div>
    <div class="text-input" align="center">
        <input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
    </div>

</form>

<script type="text/javascript">
    function radioValidation(){

        var gender = document.getElementsByName('gender');
        var genValue = false;

        for(var i=0; i<gender.length;i++){
            if(gender[i].checked == true){
                genValue = true;    
            }
        }
        if(!genValue){
            alert("Please Choose the gender");
            return false;
        }

    }
</script>

来源：http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

【讨论】：

【解决方案5】：

document.forms[ 'forms1' ].onsubmit = function() {
    return [].some.call( this.elements, function( el ) {
        return el.type === 'radio' ? el.checked : false
    } )
}

只是我脑子里想的东西。不确定代码是否正常工作。

【讨论】：

【解决方案6】：

除了上述 Javascript 解决方案之外，您还可以通过在标记中根据需要标记单选按钮来使用 HTML 5 解决方案。这将消除对任何 Javascript 的需求，让浏览器为您完成工作。

请参阅HTML5: How to use the "required" attribute with a "radio" input field，了解如何做好这项工作的更多信息。

【讨论】：