Question

我在获取代码以验证单选按钮和复选框时遇到一些问题。我可以为我的文本区域弄清楚，但似乎无法用其他输入内容解决问题。

我不太确定还要采取其他步骤，尤其是在这些多项选择题中。让我知道您的建议，将不胜感激。

function validateForm() {
  var x = document.forms["quiz"]["text1"].value;
  if (x == "") {
    alert("Oops, you forgot the text!");
    return false;
  } else if (x == "yes" || x == "Yes" || x == "YES") {
    return true;
  }

}

function formSubmit() {
  document.getElementById("quiz").submit();
}

function reset() {
  document.getElementById("reset").reset();
}

function validate() {
  var a = document.getElementById("rad1").required;
  var b = document.getElementById("op1").required;
  var c = document.getElementById("rad2").required;
  if (a == false || b == false || c == false) {
    alert("Oops, you forgot something!")
  }
}

<h4>First, Let's take a small quiz! What type of Developer am I?</h4>
  <form name="quiz" id="quiz" method="post">
    <table>
      <tr>
        <td>
          <label for="ques1">Do you ever think about how you would design a web page?</label>
        </td>
        <td>
          <input type="radio" value="no" name="rad1">NO
          <input type="radio" value="yes" name="rad1">YES
        </td>
      </tr>
      <tr>
        <td>
          <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label>
        </td>
        <td>
          <input type="checkbox" name="op1"> Ease of Use
          <input type="checkbox" name="op1"> Graphics & Content
          <input type="checkbox" name="op1"> The Data Collected
          <input type="checkbox" name="op1"> N/A
        </td>
      </tr>
      <tr>
        <td>
          <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label>
        </td>
        <td>
          <input type="radio" value="no" name="rad2">NO
          <input type="radio" value="yes" name="rad2">YES
        </td>
      </tr>
      <tr>
        <td>
          <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label>
        </td>
        <td>
          <input type="text" name="text1" maxlength="3">
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))">
          <input type="reset" id="reset">
        </td>
      </tr>
    </table>
  </form>

Answer 1

请检查以下修改过的HTML。我已用您期望的验证重新修改。浏览代码以了解想法

<!DOCTYPE html>
<html>
<head>
    <script>
        function validateForm() {
          debugger;
           if(!validate())
             {
               
                  var x = document.forms["quiz"]["text1"].value;
                  if (x == "") {
                      alert("Oops, you forgot the text!");
                      return false;
                  }
                  else if (x == "yes" || x == "Yes" || x== "YES") {
                      alert("Alright");

                      return true;
                  }
             }

        }

        function formSubmit()
            {
                document.getElementById("quiz").submit();
            }
        function reset()
            {
                document.getElementById("reset").reset();
            }
        function validate()
            { 
              debugger;
                var a1 = document.getElementById("rad1").checked;
                var a2 = document.getElementById("rad2").checked;
                var a3 = document.getElementById("rad3").checked;
                var a4 = document.getElementById("rad4").checked;
              
                 var b1 = document.getElementById("op1").checked;
                 var b2 = document.getElementById("op2").checked;

                 var b3 = document.getElementById("op3").checked;

                var b4 = document.getElementById("op4").checked;

              if ((a1 == false &&  a2 == false) || (a3 == false &&  a4 == false) || (b1 == false && b2 == false && b3 == false && b4 == false))
                    {
                        alert("Oops, you forgot first three questions!")
                        return false;
                    }
               
            }
    </script>
</head>

<body>
    <h4>First, Let's take a small quiz! What type of Developer am I?</h4>
        <form name="quiz" id="quiz" method="post">
            <table>
                <tr>
                    <td>
                        <label for="ques1">Do you ever think about how you would design a web page?</label>
                    </td>
                    <td>
                        <input type="radio" value="no" id="rad1">NO
                        <input type="radio" value="yes" id="rad2">YES
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label>
                    </td>
                    <td>
                        <input type="checkbox" id="op1"> Ease of Use
                        <input type="checkbox" id="op2"> Graphics & Content
                        <input type="checkbox" id="op3"> The Data Collected
                        <input type="checkbox" id="op4"> N/A           
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label>
                    </td>
                    <td>
                        <input type="radio" value="no" id="rad3">NO
                        <input type="radio" value="yes" id="rad4">YES
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label>
                    </td>
                    <td>
                        <input type="text" name="text1" maxlength="3"> 
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))">
                        <input type="reset" id="reset">
                    </td>
                </tr>
            </table>
        </form>
</body>
</html>

验证单选按钮和复选框

1 个答案: