Radio button validation through JavaScript

Question

I have the following form:

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

I am trying to validate whether a Radio button has been selected.

The code I am using:

<script type="text/javascript">
function validateForm()
{
if( document.forms["survey1"]["q1"].checked)
{
    return true;
}

else
{
    alert('Please answer all questions');
    return false;
}
}
</script>

This is not working. Any ideas?

Andrea · Accepted Answer · 2012-11-03 19:52:34Z

11

When using radiobuttons you have to go through to check if any of them is checked, because javascript threats them as an array:

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

Regards

answered Nov 3, 2012 at 19:52

Andrea

3962 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Matt Over a year ago

what if i had another set of radios aswell... <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'> <br /> <div id="question">Q2) My teachers are helpful and supprotive</div><br /> <br /> Always<INPUT TYPE = 'Radio' Name ='q2' value= 'a'> ect.

Andrea Over a year ago

Then you can add another call to validateRadio() passing the corresponding radio set (document.forms["survey1"]["q2"]). If you have N sets of radios, you can use a for loop to go through all radio sets.

Matt Over a year ago

i want to add a change to an element if the radio is unclicked (to show which one has not been answered) i want to use question.style.border = "solid"; but dont know where to add it and would the if statement be if(validateRadio (!document.forms["survey1"]["q1"])) { question.style.border = "solid"; }

Andrea Over a year ago

You need to give a different ID to each DIV, for example <div id="question1">; then you can use if(!validateRadio (document.forms["survey1"]["q1"])) { document.getElementById('question1').style.borderStyle = "solid"; } P.S.: Take care on where you place the "!", put it before the function name, not before the radio set.

Matt Over a year ago

would this go in the else after the alert?

|

Gavo · Accepted Answer · 2016-02-25 20:49:53Z

My solution for validation complex forms include radios.

Usage is simple, function return TRUE/FALSE after validation. var rs_target is ID of form

scTo is my custom func to scroll to ID, you can use own function to show/scroll errors

scTo("#"+err_target);

Error box will be like

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

Validation

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

Function

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

Collectives™ on Stack Overflow

Radio button validation through JavaScript

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related