需要帮助以JavaScript验证单选按钮

Question

I need help validating radio buttons with JavaScript. Here's the section of HTML:

<span class="formbold">Will you be attending the ceremony and reception?</span><br/>
<input type="radio" name="receptionattend" value="yesboth" /> Yes, both!<br/>
<input type="radio" name="receptionattend" value="yesc" /> Yes, but only the ceremony! <br/>
<input type="radio" name="receptionattend" value="yesr" /> Yes, but only the reception!<br/>
<input type="radio" name="receptionattend" value="no" /> No, you guys are lame!

And here's the simplest validation code I have:

function validateForm()
    var y=document.forms["rsvpform"]["receptionattend"].checked;
 if (y==null || y=="")
    {
    alert("Please indicate whether or not you will attend.");
    return false;
    }
}

My issue mostly seems to be that, no matter how I code the validation, it returns an error message even when I have a radio button selected.

Answer 1

The first issue you have is that in general, you should force a default in your radio buttons, make one of the buttons be already "checked" and you will never have a null value passed to your form checker. Most people expect their radio buttons to have a default already checked and this is standard practice in web development.

However, should you need to check for null or undefined, you should use typeof and strict comparison with ===

 (typeof y === "undefined" || y === null);

After reading your comment - I noticed one other thing. Are you trying get get the value directly from Javascript by reading the DOM with like an onclick function? You won't be able to do this because you aren't ever actually getting your checked value with this line.

var y=document.forms["rsvpform"]["receptionattend"].checked;

Instead, try something like this.

var y = document.getElementsByName('receptionattend');
var y_value;
for(var i = 0; i < y.length; i++){
    if(y[i].checked){
       y_value = y[i].value;
   }
}

y_value should now return the result of the checked radio button. If nothing was checked y_value will be null.

Answer 2

this line:

var y=document.forms["rsvpform"]["receptionattend"].checked;

returns either true or false based on checked attribute of your element, so you should be doing:

if ( !y ) { //if not checked i.e false
    alert("Please indicate whether or not you will attend.");
    return false;
}

do like:

function validateForm() {
    var is_checked = false;
    var eles = document.forms["rsvpform"]["receptionattend"];
    for(var i = 0; i < eles.length; i++ ) {
        if( eles[i].checked ) {
            is_checked = true;
            break;
        }
    }

    if (!is_checked)
    {
        alert("Please indicate whether or not you will attend.");
        return false;
    }
    else {
        alert("valid");
     }
}

Demo:: jsFiddle

Answer 3

I'm not going to suggest using jquery just for this. But should you end up using jquery, it makes this kind of validation very easy.

HTML Note the use of Labels, this is just a good practice, it means your uses can click on the text and a whole raft of other accesibililty bonuses.

<span class="formbold">Will you be attending the ceremony and reception?</span><br/>
<input type="radio" name="receptionattend" value="yesboth" id="rcBoth" /><label for="rcBoth">Yes, both!</label><br/>
<input type="radio" name="receptionattend" value="yesc" id="rcCOnly" /><label for="rcCOnly"> Yes, but only the ceremony! </label><br/>
<input type="radio" name="receptionattend" value="yesr" id="rcROnly" /><label for="rcROnly">Yes, but only the reception!</label><br/>
<input type="radio" name="receptionattend" value="no" id="rcNo" /><label for="rcNo"> No, you guys are lame!</label><br />
<input type="button" value="Validate Me" id="btnValidate"/>

Javascript/Jquery Wire this up in the jquery $(document).ready event.

$("#btnValidate").click(function(){
    //The following selector is not very efficient, classes 
    //or a bounding element (eg div or fieldset) would be better
    if($("input[name='receptionattend']:checked").length == 0)
    {
        alert("Please tell us if you're attending or not!");
    }
});

http://jsfiddle.net/wpMvp/

To break down the script

• $("#btnValidate").click(function(){}); adds an onlclick event handler to the button with ID btnValidate
• $("input[name='receptionattend']:checked").length returns how many input elements with a name of receptionattend are checked
• the rest should be fairy self explanatory