通过JavaScript进行单选按钮验证

我有以下表格：

<form name="survey1" action="add5up.php" method="post" onsubmit="return validateForm()">
<div id="question">Q1) My programme meets my expectations</div><br />
Always<INPUT  TYPE = 'Radio' Name ='q1'  value= 'a'> 
Usually<INPUT  TYPE = 'Radio' Name ='q1' value= 'b'> 
Rarely<INPUT  TYPE = 'Radio' Name ='q1' value= 'c'> 
Never<INPUT  TYPE = 'Radio' Name ='q1' value= 'd'> 
<input type="submit" value="addData" />
</form>

---

这是行不通的。有什么想法吗？

当使用单选按钮时，您必须检查是否选中了其中任何一个按钮，因为javascript将它们作为数组进行威胁：

<script type="text/javascript">
function validateRadio (radios)
{
    for (i = 0; i < radios.length; ++ i)
    {
        if (radios [i].checked) return true;
    }
    return false;
}

function validateForm()
{
    if(validateRadio (document.forms["survey1"]["q1"]))
    {
        return true;
    }
    else
    {
        alert('Please answer all questions');
        return false;
    }
}
</script>

功能验证器（无线电）
{
对于（i=0；i

---

关于

我的验证复杂表单解决方案包括收音机

用法很简单，函数在验证后返回TRUE/FALSE。 var rs_target是表单的ID

scTo是我的自定义函数，可以滚动到ID，您可以使用自己的函数显示/滚动错误

scTo("#"+err_target);

错误框将类似于

<div class="rq_message_box rq_message_box_firstname display-none">err message</div>

作用

    function validateForm(rs_target) {
    var radio_arr = [];
    var my_form = $("#"+rs_target);
    my_form = my_form[0];
    $(".rq_message_box").hide(); //clear all errors
    //console.log(my_form);
    var err = false;
    var err_target = "";

    for (key in my_form) {
        //console.log("do");
        if(!my_form[key]||my_form[key]==null||err){
            break;
        }
            //console.log(my_form[key].name);
                var x = my_form[key].value;
                    //console.log(x);
                    if(my_form[key].type == "radio"){
                        //console.log("radio");
                            if(radio_arr[my_form[key].name] != true){
                                radio_arr[my_form[key].name] = null;
                            }
                            if(my_form[key].checked){
                                radio_arr[my_form[key].name] = true;
                            }
                    }else{
                    if (x == null || x == "") {
                        //console.log(form[key].name.toString() + " must be filled out");
                                err = true;
                                err_target = my_form[key].name;
                        //return false;
                    }
                    }

    }
    //console.log(radio_arr);
    var rad_err = false;
    for (key in radio_arr) {
        if(rad_err){
            break;
        }
        var x = radio_arr[key];
    if (x == null || x == "") {
        //console.log("RADIO> "+key + " must be filled out");
                rad_err = true;
                err_target = key;
    }
    }
    if(err || rad_err){
        // some error stuff, for me show prepared error/help box with class [".rq_message_box_"+err_target] / err_target is name of input like [.rq_message_box_firsname]
        $(".rq_message_box_"+err_target).show(); //show  error message for input
        scTo("#"+err_target); //scroll to - custom func
        return false;
    }else{
        return true;
    }
}

---

如果我还有另一套收音机呢。。。Q1）我的节目满足了我的期望
通常很少从不
Q2）我的老师乐于助人且支持我

始终以此类推。然后，您可以通过相应的收音机（document.forms[“survey1”][“Q2”]向validateRadio（）添加另一个调用。如果您有N组收音机，可以使用for循环遍历所有收音机。如果收音机未被锁定（以显示哪个未被应答），我想添加对元素的更改。我想使用question.style.border=“solid”；但是不知道在哪里添加它，if语句会是if（validateRadio（！document.forms[“survey1”][“q1”]）{question.style.border=“solid”；}例如，您需要为每个DIV指定不同的ID；然后您可以使用if（！validateRadio（document.forms[“survey1”][“q1”]）{document.getElementById（'question1'）.style.borderStyle=“solid”；}P.S.：注意放置“！”的位置，将其放在函数名之前，而不是放在收音机之前。这会在警报后的else中吗？

    var validation = validateForm(rs_target);
    if(validation == false){
        return false;
    }

    function validateForm(rs_target) {
    var radio_arr = [];
    var my_form = $("#"+rs_target);
    my_form = my_form[0];
    $(".rq_message_box").hide(); //clear all errors
    //console.log(my_form);
    var err = false;
    var err_target = "";

    for (key in my_form) {
        //console.log("do");
        if(!my_form[key]||my_form[key]==null||err){
            break;
        }
            //console.log(my_form[key].name);
                var x = my_form[key].value;
                    //console.log(x);
                    if(my_form[key].type == "radio"){
                        //console.log("radio");
                            if(radio_arr[my_form[key].name] != true){
                                radio_arr[my_form[key].name] = null;
                            }
                            if(my_form[key].checked){
                                radio_arr[my_form[key].name] = true;
                            }
                    }else{
                    if (x == null || x == "") {
                        //console.log(form[key].name.toString() + " must be filled out");
                                err = true;
                                err_target = my_form[key].name;
                        //return false;
                    }
                    }

    }
    //console.log(radio_arr);
    var rad_err = false;
    for (key in radio_arr) {
        if(rad_err){
            break;
        }
        var x = radio_arr[key];
    if (x == null || x == "") {
        //console.log("RADIO> "+key + " must be filled out");
                rad_err = true;
                err_target = key;
    }
    }
    if(err || rad_err){
        // some error stuff, for me show prepared error/help box with class [".rq_message_box_"+err_target] / err_target is name of input like [.rq_message_box_firsname]
        $(".rq_message_box_"+err_target).show(); //show  error message for input
        scTo("#"+err_target); //scroll to - custom func
        return false;
    }else{
        return true;
    }
}