Задать вопрос
@Black_Fire
javascript

Как провалидировать форму в которой несколько инпутов и селектов?

Нужно, чтобы если все инпуты не пустые и у селектов выбран любой пункт, кроме первого - у кнопки убирался атрибут disabled, а иначе добавлялся. То есть, надо чтобы кнопка активировалась при заполненной форме.
<div class="container">
    <form class="d-flex flex-column" action="">
      <input class="my-3" type="text">
      <input class="my-3" type="text">
      <input class="my-3" type="text">
      <select class="my-3">
          <option value="1">1</option>
          <option value="2">3</option>
          <option value="3">3</option>
      </select>
      <select class="my-3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <select class="my-3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
  </form>
    <div class="mt-3 disabled">Submit</div>
  </div>
  • Вопрос задан
  • 201 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию
    6 месяцев
    Далее
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Форма и кнопка:

const form = document.querySelector('.container form');
const button = document.querySelector('.container button');

Слушаем на форме событие input, проверяем у текстовых полей значения, а у выпадающих списков индексы выбранных пунктов:

form.addEventListener('input', e => {
  button.disabled = ![
    [  'input', el => el.value         /* !== '' */ ],
    [ 'select', el => el.selectedIndex /* !==  0 */ ],
  ].every(([ selector, validator ]) => {
    return Array.prototype.every.call(
      e.currentTarget.querySelectorAll(selector),
      validator
    );
  });
});

Или, добавляем input'ам и select'ам атрибут required, первым option'ам в качестве значений устанавливаем пустые строки - тогда можно будет воспользоваться встроенной проверкой корректности заполнения формы:

form.addEventListener('input', function() {
  button.toggleAttribute('disabled', !this.checkValidity());
});
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы