具有多個驗證形式的單選按鈕的Java驗證

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    
}

希望這可以幫助。

Answer 2

您必須檢查b是否未定義。

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

我縮減了javascript並做了一個簡單的工作演示：

http://jsfiddle.net/z7e7D/