具有多个验证的表单中单选按钮的 Javascript 验证

Question

我无法找到验证我的性别选择操作按钮的方法。我已经尽力做到这一点，说按钮不能为空，但它仍然将一个按钮识别为空并且不会让我继续。我尝试过不同的变体，比如说男性和女性都没有被选中然后返回 false，但它仍然对我不起作用。我开始认为我正在采用的方法可能不正确。您想要查看下面的主要问题是两个单选按钮，但我已将其余代码作为 Javascript 的上下文包含在内。代码的其余部分工作正常，只是单选按钮比我遇到的困难。谢谢。

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

您可以使用checked属性来了解是否选中了某个选项。

    document.getElementById('male').checked

文档在这里: http://www.w3schools.com/jsref/prop_radio_checked.asp

我猜你想做的是这样的:

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    
}

希望这有帮助。