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

naota · Accepted Answer · 2014-05-18 01:26:36Z

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.

edited May 18, 2014 at 1:26

answered May 18, 2014 at 1:19

naota

4,7081 gold badge20 silver badges21 bronze badges

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

2 Comments

user3648593 Over a year ago

I got this to work, thanks so much it's been bugging me all day! I would up vote you if I could!

caspian Over a year ago

If this is the correct answer, you should be able to mark it as the answer.

caspian · Accepted Answer · 2014-05-18 01:26:37Z

0

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/

answered May 18, 2014 at 1:26

caspian

1,80414 silver badges14 bronze badges

2 Comments

user3648593 Over a year ago

Thanks for your help, but I still end up with the same problem that even when one option is clicked, the validation still recognises the other as being empty and still won't let me proceed.

caspian Over a year ago

Interesting - looks like this is browser dependent. In Chrome the fiddle above works.

Collectives™ on Stack Overflow

Javascript Validation for Radio Buttons in a form with multiple Validations

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related