我在 HTML 中遇到 JS 和 DIV 的小问题

Question

事情是这样的，我正在学习 JS，我开始做一些简单的练习来熟悉它，所以我尝试做一个简单的表单验证，但我遇到了 div 显示错误，因为它们被覆盖了，我想得到一些建议来改进这段代码，如果可能的话，让它变得更好。谢谢！

function checkdata() {
    //Acess TextBox Content
    var name1 = document.getElementById("name1").value;
    var name2 = document.getElementById("name2").value;
    var email = document.getElementById("email").value;

    //Acess Radio Content
    var tdi = document.getElementById("tdi");
    var tri = document.getElementById("tri");
    var tsi = document.getElementById("tsi");

    //Acess Checkbox
    var ch = document.getElementById("terms").checked;

    //Functions
    if (name1 == "" || name2 == "" || email == "") {
      document.getElementById("errorsdiv").innerHTML = "Those Fields Are Required";

    }
    if ((tdi.checked == false) || (tri.checked == false) || (tsi.checked == false)) {
      document.getElementById("errorsdiv").innerHTML = "You need to check one branch";
    }
    if (ch.checked == false) {
      document.getElementById("errorsdiv").innerHTML = "You need to Agree on our terms";
    }
  }

<h1>Form Validation</h1>
<form>
  <fieldset>
    <legend>Informations</legend>
    <label for="name1">Enter Your First Name</label>
    <input type="text" id="name1"><br>
    <label for="name2">Enter Your Last Name</label>
    <input type="text" id="name2"><br>
    <label for="email">Enter Your email</label>
    <input type="text" id="email"><br>
    <label>Choose Your Branch : </label>
    <label for="tdi">TDI</label>
    <input type="radio" name="branch" id="tdi">
    <label for="tri">TRI</label>
    <input type="radio" name="branch" id="tri">
    <label for="tsi">TSI</label>
    <input type="radio" name="branch" id="tsi"><br>
    <input type="checkbox" name="terms" id="terms">
    <label for="terms">Agree On Our Terms</label>
  </fieldset><br>
  <input type="button" value="Submit" class="button" onclick="checkdata();">
  <fieldset class="errorsf">
    <legend>Errors</legend>
    <div class="errorsdiv" id="errorsdiv">

    </div>
  </fieldset>
</form>

Answer 1

这应该可以帮助您解决错误消息被覆盖的问题。我改变了每一次出现的

document.getElementById("errorsdiv").innerHTML =

至

document.getElementById("errorsdiv").innerHTML +=

这可以防止 errorsdiv 在 forEach 循环的每次迭代中被覆盖。

我还将 errorsdiv 设置为空状态，每当您的函数被调用时，以防止 innerHTML 在提交尝试后不断增长。

我也改了这条语句的逻辑：

if ((tdi.checked == false) || (tri.checked == false) || (tsi.checked == false)) {

至

if ((tdi.checked == false) && (tri.checked == false) && (tsi.checked == false)) {

那些需要是 AND 运算符而不是 OR 运算符。你的方式永远不会 return 正确，因为一次只能检查 1 个单选按钮。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
  <link rel="stylesheet" href="style.css">
  <script>
    function checkdata() {
      document.getElementById("errorsdiv").innerHTML = "";
      //Acess TextBox Content
      var name1 = document.getElementById("name1").value;
      var name2 = document.getElementById("name2").value;
      var email = document.getElementById("email").value;

      //Acess Radio Content
      var tdi = document.getElementById("tdi");
      var tri = document.getElementById("tri");
      var tsi = document.getElementById("tsi");

      //Acess Checkbox
      var ch = document.getElementById("terms");

      //Functions
      if (name1 == "" || name2 == "" || email == "") {
        document.getElementById("errorsdiv").innerHTML += "<p>First Name, Last Name, and email are Required</p>";

      }
      if ((tdi.checked == false) && (tri.checked == false) && (tsi.checked == false)) {
        document.getElementById("errorsdiv").innerHTML += "<p>You need to check one branch</p> ";
      }
      if (!ch.checked) {
        document.getElementById("errorsdiv").innerHTML += "<p>You need to Agree to our terms</p>";
      }
    }
  </script>
</head>

<body>
  <h1>Form Validation</h1>
  <form>
    <fieldset>
      <legend>Informations</legend>
      <label for="name1">Enter Your First Name</label>
      <input type="text" id="name1"><br>
      <label for="name2">Enter Your Last Name</label>
      <input type="text" id="name2"><br>
      <label for="email">Enter Your email</label>
      <input type="text" id="email"><br>
      <label>Choose Your Branch : </label>
      <label for="tdi">TDI</label>
      <input type="radio" name="branch" id="tdi">
      <label for="tri">TRI</label>
      <input type="radio" name="branch" id="tri">
      <label for="tsi">TSI</label>
      <input type="radio" name="branch" id="tsi"><br>
      <input type="checkbox" name="terms" id="terms">
      <label for="terms">Agree On Our Terms</label>
    </fieldset><br>
    <input type="button" value="Submit" class="button" onclick="checkdata();">
    <fieldset class="errorsf">
      <legend>Errors</legend>
      <div class="errorsdiv" id="errorsdiv">

      </div>
    </fieldset>
  </form>
</body>

</html>

我在 HTML 中遇到 JS 和 DIV 的小问题

I'm having a little probleme with JS and DIV in HTML

html

javascript

html5-formvalidation