Как сделать валидацию формы

Question

Подскажите, как сделать валидацию формы, чтоб если все поля заполнены то кнопка появляется?

Мой код, но я знаю что он плохой, у меня проверка идет когда даже один инпут заполен, но нужно сделать так что когда все поля пустие кнопка не появлялась, а когда все заполнени то кнопка появилась и можно дале работать с ней

const nick = document.querySelector('#nick');
const name = document.querySelector('#name');
const form = document.querySelector('#form');
const area = document.querySelector('#area');
const btn = document.querySelector('.btn');
const all = document.querySelectorAll('.input');

input.forEach((item) => {
  item.addEventListener('input', () => {
    if (item.value) {
      console.log('true');
      btn.style.display = 'block';
      console.log(item.value);
    } else {
      btn.style.display = 'none';
    }
  });
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
</head>

<style>
  .btn {
    display: none;
  }
</style>

<body>
  <form id="form">
    <div><input type="text" class="input" id="nick" /></div>
    <div><input type="text" class="input" id="name" /></div>
    <div>
      <textarea id="area" cols="30" rows="10" class="input"></textarea>
    </div>
  </form>
  <button class="btn" type="submit">btn</button>
  <script src="app.js"></script>
</body>

</html>

Answer 1

При изменении любого поля просто проверяйте все поля на соответствие нужным условиям.

const $form = document.getElementById(`form`);
const $submit = $form.querySelector(`[type=submit]`);

const $nick = $form.querySelector(`[name=nick]`);
const $name = $form.querySelector(`[name=name]`);
const $area = $form.querySelector(`[name=area]`);

$form.addEventListener(`input`, () => {
  let isValid = true;

  if (!$nick.value.trim().length) isValid = false;
  if (!$name.value.trim().length) isValid = false;
  if (!$area.value.trim().length) isValid = false;

  $submit.disabled = !isValid;
});

<form id="form">
  <div><input type="text" class="input" name="nick" /></div>
  <div><input type="text" class="input" name="name" /></div>
  <div>
    <textarea name="area" cols="30" rows="10" class="input"></textarea>
  </div>
  <button type='submit' disabled>Отправить</button>
</form>

БЛОГ НА HUSL

Как сделать валидацию формы

Ответы (1 шт):