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

Question

[Black_Fire]

Нужно, чтобы если все инпуты не пустые и у селектов выбран любой пункт, кроме первого - у кнопки убирался атрибут 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>

Answer 1

[0xD34F]

document.querySelector('form').addEventListener('input', e => {
  document.querySelector('button').disabled = ![
    [  'input', el => el.value         ],
    [ 'select', el => el.selectedIndex ],
  ].every(([ selector, validator ]) => {
    return [...e.currentTarget.querySelectorAll(selector)].every(validator);
  });
});

Comments

[Black_Fire]

а как аналог с jquery сделать, но при этом если вместо button есть div и disabled - это класс, а не атрибут? Исправил условие

[0xD34F]

как аналог с jquery сделать

Если вы вдруг решите погуглить jquery аналоги нативных функций, вас никто за это не станет убивать, и даже пытать не будут. Так что вперёд, смелее.

если вместо button есть div и disabled - это класс

classList