Javascript Validation for Radio Buttons in a form with multiple Validations

Question

I'm having trouble finding a way to validate my Gender choice action buttons. I've made efforts at doing it by saying that the buttons can't be left null, but it still recognises one button as being null and won't let me continue. I've tried different variations of this like saying both male and female aren't selected then return false but it still won't work for me. I'm beginning to think that the method I'm going about it just may not be correct. The main issue you want to look at the below is the two radio buttons but I have included the rest of the code as context for the Javascript. The rest of the code works fine it is only the radio buttons than I'm struggling with. Thanks.

Html

<form action="ReviewPHP.php" name="review" onsubmit="return validateForm()"> 

  <fieldset> 
    Title: <input type="text" name="Title">
    </br>
    Email Address: <input type="text" name="Email">
    <br/> 
    Rating: <select name="Rating"> 
      <option value="0"></option> 
      <option value="1">Excellent</option> 
      <option value="2">Good</option> 
      <option value="3">Bad</option> 
      <option value="4">Awful</option> 
    </select>
    <br/> 
    <textarea name ="Comments" rows="8" colspan="40">Comments: 
    </textarea> 
    <br/>

    <input type="radio" name="Gender" id="male" value="male">Male
    <input type="radio" name="Gender" id="female" value="female">Female

  </fieldset> 

  <fieldset> 
    <input class="button" type="submit" value="Submit"/> 
  </fieldset> 

</form>

Javascript

function validateForm()
{ //Variable declarations for form inputs 

  var t = document.forms["review"]["Title"].value;
  var e = document.forms["review"]["Email"].value;
  var r = document.forms["review"]["Rating"].value;
  var c = document.forms["review"]["Comments"].value;
  var b = document.forms["review"]["Gender"].value;
  var atsymb = e.indexOf("@");
  var dotsymb = e.lastIndexOf(".");

  if (t == null || t == "") {
    document.getElementById("valAlert").innerHTML = "Title Missing";
    return false;
  }

  else if (e == null || e == "" || atsymb < 1 || dotsymb < atsymb + 2 || dotsymb + 2 >= e.length)
  {
    document.getElementById("valAlert").innerHTML = "Email Missing";
    return false;
  }

  else if (r == "0") {
    document.getElementById("valAlert").innerHTML = "Please Rate the Movie, it's why you're here";
    return false;
  }

  else if (c == null || c == "" || c.length < 10) {
    document.getElementById("valAlert").innerHTML = "Reviews gotta be at least 10 characters!";
    return false;
  }

  else if (b == null) {
    document.getElementById("valAlert").innerHTML = "Please select Gender";
    return false;
  }

  else {
    alert("Review for " + t + " has been submitted, Good Job!");
    return true;
  }
} 

Answer 1

You can use checked property to know if a option is checked.

    document.getElementById('male').checked

The document is here: http://www.w3schools.com/jsref/prop_radio_checked.asp

I guess what you would like to do is something like this:

var b = "";
if (document.getElementById('male').checked) {

  b = document.getElementById('male').value;

}else if(document.getElementById('female').checked) {

  b = document.getElementById('female').value;

}

if(b == "" | b == null ){
  // alert    
}

Hope this helps.

Answer 2

You have to check if b is undefined.

if (!b || b == null) {

I pared down the javascript and made a simple working demo:

http://jsfiddle.net/z7e7D/