Проверка всех input на пустоту и отображение сообщений об ошибке только у пустых

168
27 ноября 2021, 14:10

Если несколько input, рядом с ними сообщения об ошибке, у которых дефолтно display: none

<input type="text" name="f_ContactName">
<div class="fail-validation-message">Поле является обязательным для заполнения</div>
<input type="text" name="f_ContactLastname">
<div class="fail-validation-message">Поле является обязательным для заполнения</div>
<input type="text" name="f_Phone" class="phone-mask" placeholder="+7 (      )" maxlength="18">
<div class="fail-validation-message">Поле является обязательным для заполнения</div>
<input type="text" name="f_Email" required="">
<div class="fail-validation-message">Поле является обязательным для заполнения</div>

Можно ли сделать проверку на пустоту полей, не создавая для каждого поля своей отдельный if и, соответсвенно показывая сообщение об ошибке только у того input, который не заполнен?

Answer 1

document.querySelectorAll('input').forEach((input) => { 
  input.addEventListener('input', () => { 
    const message = input.nextSibling.nextElementSibling; 
    message.style.display = input.value ? 'none' : 'block'; 
  }); 
});
input { 
  display: block; 
} 
 
.fail-validation-message { 
  display: none; 
}
<input type="text" name="f_ContactName"> 
<div class="fail-validation-message">Поле является обязательным для заполнения</div> 
 
<input type="text" name="f_ContactLastname"> 
<div class="fail-validation-message">Поле является обязательным для заполнения</div> 
 
<input type="text" name="f_Phone" class="phone-mask" placeholder="+7 (      )" maxlength="18"> 
<div class="fail-validation-message">Поле является обязательным для заполнения</div> 
 
<input type="text" name="f_Email" required=""> 
<div class="fail-validation-message">Поле является обязательным для заполнения</div>

Answer 2

быстренько на коленке состряпал

[...document.querySelectorAll('input')].forEach(input => { 
  const node = input.closest('.form-group'); 
   
  input.addEventListener('input', function() { 
    if (input.value === '') { 
      node.classList.add('form-group_error'); 
    } else { 
      node.classList.remove('form-group_error'); 
    } 
  }); 
});
.error { 
  display: none; 
} 
 
.form-group_error .error { 
  display: block; 
}
<div class="form-group"> 
  <input type="text"> 
  <span class="error">Lorem ipsum dolor sit amet.</span> 
</div> 
 
<div class="form-group"> 
  <input type="text"> 
  <span class="error">Lorem ipsum dolor sit amet.</span> 
</div> 
 
<div class="form-group"> 
  <input type="text"> 
  <span class="error">Lorem ipsum dolor sit amet.</span> 
</div>

READ ALSO
Как запретить вставлять цифры в input type=&quot;text&quot;?

Как запретить вставлять цифры в input type="text"?

Стала задача запретить ввод цифр в <input type="text"> созданном для имени

214
Uri как отследить FileNotFoundException

Uri как отследить FileNotFoundException

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

132
Java. Swing. Странное не отображение GUI

Java. Swing. Странное не отображение GUI

Столкнулся с небольшой аномалиейИмеется клиент серверное приложение для игры в крестики-нолики

233
Неправильно выполняется сравнение дат JAVA

Неправильно выполняется сравнение дат JAVA

Всем привет! Выполняя одно задание, столкнулся с тем, что неправильно сортируются датыПробовал начать использовать тип Calendar, но также ничего...

208