-1

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

4

1 回答 1

0

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

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>

于 2021-09-06T20:47:57.563 回答