Есть форма, если одно из полей не заполнено нужно чтобы форма не отправлялась и рамка подсвечивалась красным и вылезала подсказка "Поле не может быть пустым".
<form action="post" class="form">
<h3 class="form__titles">Контактные данные</h3>
<div class="form__block">
<div class="form__block-input-block form__name">
<label for="name" class="form__label">ФИО<span class="span-red">*</span></label>
<input type="text" id="name" class="form__name-input normal-input required-form-field" name="name">
</div>
<div class="form-input-error">Поле не может быть пустым</div>
<div class="form__block-input-block form__birth">
<label for="birth" class="form__label">Дата рождения<span class="span-red">*</span></label>
<input type="text" id="birth" class="form__birth-input required-form-field" name="name">
<div class="form-wrap__tip-empty"></div>
</div>
<div class="form-input-error">Поле не может быть пустым</div>
<div class="form__block-input-block form__phone">
<label for="phone" class="form__label">Мобильный телефон<span class="span-red">*</span></label>
<input type="text" id="phone" class="form__phone-input required-form-field" name="name">
</div>
<div class="form-input-error">Поле не может быть пустым</div>
<div class="form__block-input-block form__email">
<label for="email" class="form__label">Электронная почта</label>
<input type="text" id="email" class="form__email-input" name="name">
</div>
</div>
<button class="end-task-button button" type="button">Оформить заявку</button>
</form>
function valid() {
let form = document.getElementsByClassName('form');
let fields = document.getElementsByClassName('required-form-field');
form.addEventListener ('submit', function(){
if(!fields[i].value){
fields[i].style.border = '2px solid red'
}
})
}
function isEmpty(val) {
// Возвращаем булево значение
return !!val;
}
const form = $('form');
$(form).on('submit', e => {
e.preventDefault();
const inputs = $('input');
$(inputs).each((index,input) => {
const div_data = $(input).attr('id');
const val = $(input).val();
if(!isEmpty(val)) { // Если пусто — покажи ошибку
$(`div[data-for="${div_data}"]`).fadeIn(300);
} else {
$(`div[data-for="${div_data}"]`).fadeOut(300);
}
});
});
.form-input-error{
display:none;
color:red;
}
.span-red{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="post" class="form">
<h3 class="form__titles">Контактные данные</h3>
<div class="form__block">
<div class="form__block-input-block form__name">
<label for="name" class="form__label">ФИО<span class="span-red">*</span></label>
<input type="text" id="name" class="form__name-input normal-input required-form-field" name="name">
</div>
<div class="form-input-error" data-for="birth">Поле не может быть пустым</div>
<div class="form__block-input-block form__birth">
<label for="birth" class="form__label">Дата рождения<span class="span-red">*</span></label>
<input type="text" id="birth" class="form__birth-input required-form-field" name="name">
<div class="form-wrap__tip-empty"></div>
</div>
<div class="form-input-error" data-for="phone">Поле не может быть пустым</div>
<div class="form__block-input-block form__phone">
<label for="phone" class="form__label">Мобильный телефон<span class="span-red">*</span></label>
<input type="text" id="phone" class="form__phone-input required-form-field" name="name">
</div>
<div class="form-input-error" data-for="email">Поле не может быть пустым</div>
<div class="form__block-input-block form__email">
<label for="email" class="form__label">Электронная почта</label>
<input type="text" id="email" class="form__email-input" name="name">
</div>
</div>
<input class="end-task-button button" type="submit" value="Оформить заявку">
</form>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
суть вопроса: У меня есть скажем 12 000 страниц одного сайта, при обычном парсинге с помощью request и cheerio через несколько страниц сайт падает с ошибкойКак...
Как реализовать навигацию по яндекс карте так, чтобы перемещаться по карте можно было бы просто подводя мышку к краю области карты? Версия...
эксперимента ради пытаюсь переписать сборщик с использованием классовХочу разделить Dev и Dist сборку в разные классы и наследовать общие модули...
Использую эту библиотеку для выбора диапазона дат: ссылка