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

Question

我在弄清楚如何编写以下代码时遇到问题：问题是我正在使用<div>带有ID错误显示的空白。这<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="[e-mail]" 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="[e-mail]" required>

我尝试在输入元素中使用“必填”，并且它对我的输入有效，但是，我认为我的教授正在寻找其他解决方案。

Answer 1

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