где сообщения об ошибках будут вставлены, когда ошибки, которые они представляют, происходят

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

Я попытался "требуется" в элементах ввода, и это работает для моих входов, однако я думаю, что мой профессор ищет другое решение.

Answer 1

Вот быстрое и простое решение для вас

во всех ваших полях ввода, введите 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>

Answer 2

Я предлагаю вам добавить change прослушиватель событий для каждого поля ввода и проверить каждое из них, и если некоторые из них недействительны, вы должны установить innerText свойство div 'error-display' в текст сообщения об ошибке