Если несколько 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, который не заполнен?
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>
быстренько на коленке состряпал
[...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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Стала задача запретить ввод цифр в <input type="text"> созданном для имени
Я выбираю из галереи изображение и в последствии его использую как Uri, но предположим что пользователь удалил это изображение со своей галереи,...
Столкнулся с небольшой аномалиейИмеется клиент серверное приложение для игры в крестики-нолики
Всем привет! Выполняя одно задание, столкнулся с тем, что неправильно сортируются датыПробовал начать использовать тип Calendar, но также ничего...