当它们所代表的错误发生时，将插入错误消息

Question

I'm having an issue figuring out how to write the following code: the problem is that I'm using an empty <div> with the id error-display. This <div> is where the error messages will be inserted when the errors that they represent occur. I want to make all fields validated when the user clicks off of them to the next field. If there's an error, an error message should be displayed. Likewise, error messages should be removed when the user fixes the problem. yet I'm not sure how to do it! here is what I got so far:

    <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>

After inserting the emipty "div id="error-display">" what can I do? lets say the error message is: Invalid email address.

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

I tried "required" in the input elements and it's working for my inputs, however, I think my professor is looking for a different solution.

Answer 1

我建议你为每个输入字段添加change事件监听器并验证它们中的每一个，如果有些是无效的，你应该将'error- innerText属性设置为错误消息文本

Answer 2

Here's a quick and simple solution for you

in all of your input fields, put onchange="validateField(fieldID, fieldname)" like this

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

then paste this script below your form (or you can have this in a separate js file)

<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>