如何使用HTML和纯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)
};

{{link1：Jsfiddle链接}}

- Hithesh k

---

这个回答解决了你的问题吗？禁用/启用提交按钮，直到所有表单都被填写 - Nico Haase

Answer 1

设置一个验证对象（validation object），使用布尔值记录所有的值是否满足验证要求。

然后，循环遍历所有输入框，并为每个添加事件监听器。在本例中，我检查了每个输入框是否至少有一个字符，但你可能需要进一步扩展此内容。

最后，循环遍历您的验证对象并检查所有值是否为true。如果是，则从按钮中删除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>

- dave

---

点击提交按钮后如何获取表单对象？ - Hithesh kumar

@Hitheshk，请不要在一个帖子中问几个问题。如果您想知道如何从表单中提取字段值，请在SO上进行搜索。会有多个问题和答案涉及此主题。 - Carsten Massmann

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>

- Carsten Massmann

Answer 3

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

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>

- Nicholas Bergesen

Answer 4

创建一个验证函数，该函数将检查所有验证并设置按钮的禁用属性（如果验证失败）以及反之。在所有字段的每次更改时调用验证函数。

您可以使用oninput事件。

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

- Anirudh Kanukanti