我对 HTML 中的 JS 和 DIV 有点问题

扎卡里亚·拜比

所以这就是事情，我正在学习 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>

罗伯·摩尔

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

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运算符。您拥有它的方式永远不会返回 true，因为在任何时候都只能检查 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。