当错误消息表示的错误发生时，将插入错误消息的位置

Question

我在弄清楚如何编写以下代码时遇到了问题:问题是我使用了一个id为<div> -display的空错误显示。当错误消息表示的错误发生时，将在此<div>中插入错误消息。我想让所有的字段验证时，用户单击它们的下一个字段。如果出现错误，应该会显示一条错误消息。同样，当用户修复问题时，应该删除错误消息。但是我不知道该怎么做！这是我到目前为止所得到的：

    <div id="error-display">
  </div>
    <form id="project-form">
        <br>E-mail:<span class="error">* </span>
        <input type="email" name="email" id="email" placeholder="Example@example.com" required>
        <br>Password:<span class="error">* </span>
        <input type="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"  id="password" required>
        <br>Confirm Password:<span class="error">* </span>
        <input type="password" placeholder="Repeat Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"  id="password-confirmation"  required>

​

插入emipty "div id="error-display">“后，我能做什么？假设错误消息是:无效的电子邮件地址。

<input type="email" name="email" id="email" placeholder="Example@example.com" required>

我在输入元素中尝试了"required“，它对我的输入有效，然而，我认为我的教授正在寻找一个不同的解决方案。

Answer 1

我建议您为每个输入字段添加change事件侦听器并验证每个字段，如果某些字段无效，则应将' error -display‘div的innerText属性设置为错误消息文本

Answer 2

这里有一个快速而简单的解决方案

在所有输入字段中，将onchange="validateField(fieldID, fieldname)"放在下面

<input type="email" name="email" id="email" onchange="validateField('email', 'Email')"  placeholder="Example@example.com" required>

然后将这个脚本粘贴到你的表单下面(或者你可以把它放在一个单独的js文件中)

<script>
   function validateField(fieldID, fieldname) {
     var inpObj = document.getElementById(fieldID);
       if (!inpObj.checkValidity()) {
         document.getElementById("error-display").innerHTML = "Invalid " + fieldname + ":" + inpObj.validationMessage;
       } else {
         //this will clear your error if the input is already correct
         document.getElementById("error-display").innerHTML = "";
       } 
   }
</script>