Самый простой способ включить кнопку отправки формы, когда ввод текста не пуст

Question

Я бы хотел отключить кнопку submit, пока весь текст inputs не будет заполнен. Мой пример кода ниже не работает.

Какой самый простой и идиоматичный способ добиться этого и чего мне не хватает?

const form = document.forms[0]
const inputs = form.querySelector("fieldset > *")
const submit = form.querySelector("[type=submit]")

inputs.addEventListener("change", () => {
  if (!inputs.length) {
    submit.disabled = true
  } else {
    submit.disabled = false
  }
})

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit">
</form>

Мне известно, что по этому вопросу имеется множество вопросов и ответов о переполнении стека, но большинство из них неоправданно сложны.

Answer 1

Вы должны выбрать все входы / текстовые поля внутри набора полей с помощью querySelectorAll и цикл для каждого значения.

Вы должны попробовать приведенный ниже код, чтобы получить то, что вы хотите. Вы можете использовать Jquery, чтобы сделать это намного проще.

const form = document.forms[0]
var inputs = form.querySelectorAll("fieldset > input, fieldset > textarea"),result;
const submit = form.querySelector("[type=submit]")
console.log(inputs);
		for (var i = 0; i < inputs.length; i++) {
	    inputs[i].addEventListener('change', function() {
        for (var j = 0; j < inputs.length; j++) {
          if (!inputs[j].value.length) {
            submit.disabled = true
            return;
          } else {
            submit.disabled = false
          }
        }
		});
	}

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit" disabled>
</form>

Answer 2

Вероятно, аналогично другим решениям, я тестировал это в JSFiddle, поэтому я знаю, что он работает по крайней мере.

const form = document.forms[0];
const inputs = form.querySelectorAll("fieldset > input, fieldset > textarea");
const submit = form.querySelector("[type=submit]");

for (i in inputs) {
    var _input = inputs[i];

    if (typeof _input == 'object') {
    _input.addEventListener("change", () => {
      submit.disabled = false;

      for (i in inputs) {
        var _input = inputs[i];

        if (typeof _input == 'object') {
          if (_input.value == '') {
            submit.disabled = true;
            break;
          }
        }
      }
    });
  }
}

https://jsfiddle.net/un1m5jgq/13/

Answer 3

Вы можете сделать функцию, чтобы проверить, являются ли входы пустыми. Затем просто сделайте эту функцию обратным вызовом для ввода формы.

EDIT:

Если у вас есть массив входов, который вы можете использовать для циклов и заменить все отдельные входные переменные.

let form = document.forms[0]
let nameInp = document.getElementById('name');
let emailInp = document.getElementById('email');
let messageInp = document.getElementById('message');

let submit = form.querySelector("[type=submit]")

function checkInputs() {
  if (nameInp.value != "" && emailInp.value != "" && messageInp.value != "") {
    
    submit.disabled = false;
    
  } else if(!(nameInp.value != "" && emailInp.value != "" && messageInp.value != "")){
    
    submit.disabled = true;
    
  }
}

nameInp.addEventListener("change",checkInputs);
emailInp.addEventListener("change",checkInputs);
messageInp.addEventListener("change",checkInputs);

<form>
  <fieldset>
    <input type="text" placeholder="John Doe" id="name"><br>
    <input type="email" placeholder="john@example.com" id="email"><br>
    <textarea placeholder="Lorem ipsum dolor sit amet." id="message"></textarea>
  </fieldset>

  <input type="submit" value="Submit" disabled>
</form>