通过 JavaScript 验证单选按钮

Posted 2023-03-05

【中文标题】通过 JavaScript 验证单选按钮

【英文标题】：Radio button validation through JavaScript

【发布时间】：2012-10-24 03:38:58

【问题描述】：

我有以下表格：

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

我正在尝试验证是否选择了 Radio 按钮。

我正在使用的代码：

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

if( document.forms["survey1"]["q1"].checked)

    return true;


else

    alert('Please answer all questions');
    return false;


</script>

这不起作用。有什么想法吗？

【参考方案1】：

当使用单选按钮时，你必须检查它们是否被选中，因为 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>

问候

【讨论】：

如果我还有另一套收音机会怎样...

然后您可以添加另一个调用 validateRadio() 传递相应的无线电集 (document.forms["survey1"]["q2"])。如果您有 N 组收音机，则可以使用 for 循环遍历所有收音机组。

如果收音机没有被点击，我想添加一个元素的改变（显示哪个没有被回答）我想使用 question.style.border = "solid";但不知道在哪里添加它，如果语句是 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 吗？

【参考方案2】：

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

使用简单，函数验证后返回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>

验证

    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;