如何禁用提交按钮，直到使用 html 和 vanilla js 填写所有必填字段

Question

如何在用户输入所有字段之前禁用提交按钮，以及如何在提交表单上使用事件监听器。

<form action='index.html' id="form-user" onsubmit="init()">
  <input type="text" name="username" id="username" placeholder="username">
  <input type="email" name="email" id="email" placeholder="email">
  <input type="password" name="password" id="password" placeholder="password">
  <button type="submit" name="submit" id='button-send'>SUBMIT</button>
</form>

const init = function () {
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let email = document.getElementById("email").value;
  alert(username,password,email)
};

Jsfiddle link

Answer 1

使用布尔值设置一个验证对象，以记录您的所有值是否都已通过验证。

然后我会遍历您的所有输入并为每个输入添加一个事件侦听器。在此示例中，我检查了每个字符中是否至少包含一个字符，但您可能需要对此进行扩展。

最后，遍历您的验证对象并检查所有值是否为真。如果是，请从按钮中删除 disabled 属性。

let inputs = document.querySelectorAll('input');
let buttonSend = document.getElementById('button-send');

let inputValidator = {
  "username": false,
  "email": false,
  "password": false
}

inputs.forEach((input) => {
  input.addEventListener('input', () => {
    let name = event.target.getAttribute('name');
    if (event.target.value.length > 0) {
      inputValidator[name] = true;
    } else {
      inputValidator[name] = false;
    };

    let allTrue = Object.keys(inputValidator).every((item) => {
      return inputValidator[item] === true
    });

    if (allTrue) {
      buttonSend.disabled = false;
    } else {
      buttonSend.disabled = true;
    }
  })
})

<form action='index.html' id="form-user">
  <input type="text" name="username" id="username" placeholder="username">
  <input type="email" name="email" id="email" placeholder="email">
  <input type="password" name="password" id="password" placeholder="password">
  <button type="submit" name="submit" id='button-send' disabled>SUBMIT</button>
</form>

Answer 2

这可能不是您想要的，但您只需在输入字段中使用required 属性即可获得几乎相同的效果：

<form action='index.html' id="form-user">
  <input type="text" name="username" id="username" placeholder="username" required>
  <input type="email" name="email" id="email" placeholder="email" required>
  <input type="password" name="password" id="password" placeholder="password" required>
  <button type="submit" name="submit" id='button-send' >SUBMIT</button>
</form>

Answer 3

使用 onBlur 事件将确保用户访问了每个字段。您可能还想检查该字段是否包含值，为此您可以添加 HTML 必需属性。

var isDirty = {
  username: false,
  password: false,
  email: false
}

const init = function() {
    let incompleteItems = getIncompleteItems();
  if(incompleteItems.length > 0) {
    alert(`${incompleteItems} requires a value.`);
    return;
  }
  
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let email = document.getElementById("email").value;
  alert(`values: ${username}, ${email}, ${password}`);
};

const onChange = function(e) {
    isDirty[e.id] = true;
}

const getIncompleteItems = function() {
    let incomplete = "";
    for (const [key, value] of Object.entries(isDirty)) {
    if(value === false) {
        if(incomplete.length > 0) {
        incomplete += `, ${key}`;
      }
      else {
        incomplete = key;
      }
    }
  }
  return incomplete;
}

<form method='GET' id="form-user" onsubmit="init()">
  <input type="text" name="username" id="username" placeholder="username" onBlur="onChange(this)">
  <input type="email" name="email" id="email" placeholder="email" onBlur="onChange(this)">
  <input type="password" name="password" id="password" placeholder="password" onBlur="onChange(this)">
  <button type="submit" name="submit" id='button-send'>SUBMIT</button>
</form>

Answer 4

创建一个验证函数，它将检查所有验证并在验证失败时设置按钮的禁用属性，反之亦然。每次更改所有字段时调用验证函数。

你可以使用oninput事件

<input type="text" oninput="validate()">