Блог

Главная - Вопросы по программированию - Как удалить ошибку из полей формы после того, как они были заполнены?

Как удалить ошибку из полей формы после того, как они были заполнены?

#javascript #html #forms #validation

#javascript #HTML #формы #проверка

Вопрос:

Итак, я создаю форму, которая требует от пользователей заполнения полей. Если они этого не сделают или если они заполнят поля неправильно, поля будут обведены красной рамкой и сообщением об ошибке, в котором пользователю предлагается повторить попытку.

Пока это работает, но проблема в том, что он не удалит красную рамку после заполнения поля и удаления фокуса с поля.

Мой код приведен ниже.

Что мне нужно изменить в моей функции JavaScript, чтобы красные границы и сообщение об ошибке исчезли сразу после ввода пользователем достоверной информации и перед отправкой?

— Пожалуйста, только ванильный javascript, без jQuery —

 const errorMessage1 = document.getElementById('errorMessage1');
const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('mail');

function nameAndEmailValidation() {
    if (name.value === '' amp;amp; email.value === '') {
        name.style.border = '7px solid';
        name.style.borderColor = 'red';
        email.style.border = '7px solid';
        email.style.borderColor = 'red';
        errorMessage1.style.display = "block";
    } else if (name.value === '') {
        name.style.border = '7px solid';
        name.style.borderColor = 'red';
        errorMessage1.style.display = "block";
    } else if (email.value === '') {
        email.style.border = '7px solid';
        email.style.borderColor = 'red';
        errorMessage1.style.display = "block";
    } else {
        email.removeAttribute('border');
        email.removeAttribute('borderColor');
        errorMessage1.style.display = "none";
    }
}

submitButton.addEventListener('click', (e) => {
  if (!nameAndEmailValidation()) {
    e.preventDefault();
  }
});  
 <form id="form" action="index.html" method="post" novalidate>
  <fieldset id="infoSection">
    <h3 id="errorMessage1" style="display: none;">
      Enter all required information.
    </h3>
    <legend>Who Are You?</legend>

    <label for="name">Name:</label>
      <input type="text" id="name" name="user-name" required>

    <label for="mail">Email:</label>
      <input type="email" id="mail" name="user-email" required>
      
      <button style="font-size:18px" type="submit" id="submitButton">Submit</button>
      
   </fieldset>
 </form>

Ответ №1:

Я радикально изменил ваш js-код. Проверка начинает работать только после нажатия на кнопку (это правильно). Добавлено onintup событие, которое определяет заполняемость входных данных. И все же я изменил имена полей на более правильные — от user-name до name , а также, user-email до email . Смотрите пример.

 const errorMessage1 = document.getElementById('errorMessage1');
const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('mail');

function nameAndEmailValidation() {    
    if (name.value === '') {
        name.style.border = '7px solid';
        name.style.borderColor = 'red';
    } else {
        name.style.border = '';
        name.style.borderColor = '';
    }
    
    if (email.value === '') {
        email.style.border = '7px solid';
        email.style.borderColor = 'red';
    } else {
        email.style.border = '';
        email.style.borderColor = '';
    }
    
    if (name.value === '' || email.value === '') {
        errorMessage1.style.display = "block";
    } else {
        errorMessage1.style.display = "none";
    }
}
 
      name.oninput = function () {
              nameAndEmailValidation();
      }

      email.oninput = function () {
              nameAndEmailValidation();
      }

submitButton.addEventListener('click', (e) => {
    e.preventDefault();
    
    nameAndEmailValidation();
      
});  
 <form id="form" action="index.html" method="post" novalidate>
  <fieldset id="infoSection">
    <h3 id="errorMessage1" style="display: none;">
      Enter all required information.
    </h3>
    <legend>Who Are You?</legend>

    <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

    <label for="mail">Email:</label>
      <input type="email" id="mail" name="email" required>
      
      <button style="font-size:18px" type="submit" id="submitButton">Submit</button>
      
   </fieldset>
 </form>

Ответ №2:

Следующий код — это просто пример того, как проверить значение ввода и, если оно установлено '' nothing , затем отобразить ошибку и установить порядок на красный и отобразить сообщение об ошибке, иначе, если значение ввода на самом деле установлено на что-то другое, чем '' тогда установите границу на зеленый и удалитесообщение об ошибке.

Я думаю, что здесь должно быть гораздо больше задействовано с точки зрения проверки. Для проверки простого значения имени для чего-либо может быть достаточно, однако при проверке электронной почты следует использовать специальную проверку с использованием регулярных выражений для проверки электронной почты.

Кроме того, вы можете захотеть проверить правильность blur фактического input поля вместо кнопки отправки… Это отобразит или удалит сообщения об ошибках и значения цвета css с точки зрения проверки css без нажатия кнопки, но с заполнением соответствующих входных данных.

Например, пользователь заполняет поле name, и когда они удаляют фокус на поле name и перемещают поле email, JS запускает и добавляет или удаляет сообщения об ошибках и цвет css, относящиеся к сфокусированному полю.

 const errorMessage1 = document.getElementById('errorMessage1');
const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('mail');
let err = document.getElementById('err');

function nameAndEmailValidation() {
//check if the name field is empty, if it is set background and text color to red
  if (name.value === '') {
    name.style.borderColor = 'red';
    nameErr.style.color = 'red';
    nameErr.textContent = 'Please fill out Name field';
  } else { // else set background and text color to green and remove error text
    name.style.borderColor = 'green';
    nameErr.textContent = '';
  }
  if (email.value === '') {
    email.style.borderColor = 'red';
    emailErr.style.color = 'red';
    emailErr.textContent = 'Please fill out Email field';
  } else {
    email.style.borderColor = 'green';
    emailErr.textContent = '';
  }
}

submitButton.addEventListener('click', (e) => {
  if (!nameAndEmailValidation()) {
    e.preventDefault();
  }
});  
 <form id="form" action="index.html" method="post" novalidate>
  <fieldset id="infoSection">
    <h3 id="errorMessage1" style="display: none;">
      Enter all required information.
    </h3>
    <legend>Who Are You?</legend>

    <label for="name">Name:</label>
    <input type="text" id="name" name="user-name" required>
    <p id="nameErr"></p>
    <label for="mail">Email:</label>
    <p id="emailErr"></p>
    <input type="email" id="mail" name="user-email" required>

    <button style="font-size:18px" type="submit" id="submitButton">Submit</button>

  </fieldset>
</form>