Валидация на пустые поля формы js

119
26 июня 2021, 15:10

Есть форма, если одно из полей не заполнено нужно чтобы форма не отправлялась и рамка подсвечивалась красным и вылезала подсказка "Поле не может быть пустым".

    <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'
        }
    })
}
Answer 1

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>

READ ALSO
Как сделать задержку парсинга на node.js?

Как сделать задержку парсинга на node.js?

суть вопроса: У меня есть скажем 12 000 страниц одного сайта, при обычном парсинге с помощью request и cheerio через несколько страниц сайт падает с ошибкойКак...

111
яндекс карта, перемещение за указателем мышки

яндекс карта, перемещение за указателем мышки

Как реализовать навигацию по яндекс карте так, чтобы перемещаться по карте можно было бы просто подводя мышку к краю области карты? Версия...

86
Gulp, es6, наследование

Gulp, es6, наследование

эксперимента ради пытаюсь переписать сборщик с использованием классовХочу разделить Dev и Dist сборку в разные классы и наследовать общие модули...

96
Как установить выбранный диапазон дат по умолчанию?

Как установить выбранный диапазон дат по умолчанию?

Использую эту библиотеку для выбора диапазона дат: ссылка

108