Question

我在弄清楚如何编写以下代码时遇到问题：问题是我正在使用带有ID错误显示的空<div>。当错误消息表示的错误发生时，将在此<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>

插入空词“ div id =” error-display“>”后，我该怎么办？可以说错误消息是：无效的电子邮件地址。

<input type="email" name="email" id="email" placeholder="Example@example.com" 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>

错误消息表示的错误发生时将在何处插入错误消息

2 个答案: