javascript中的单选按钮验证

Question

需要验证单选按钮输入,即当按下提交按钮并且没有选择单选按钮时,它会提醒用户说"请选择一个复选框",如果选择了单选按钮,则只需提交表单,需要没有警觉.

只能使用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>

任何指针都非常感谢,谢谢.

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

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

问候,

费尔南多

Answer 3

你可以做这样的事情

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

Answer 4

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

只是我脑子里的一些东西。不确定代码是否有效。