在 javascript 上所需的 html5 返回 true 后，如何禁用提交按钮？

Question

我的html代码是这样的：

<form>
    <label for="name">* Name</label>
    <input type="text" id="name" required><br>
    <label for="name">* Address</label>
    <input type="text" id="address" required><br>
    <input type="submit" value="Submit">
</form>

我正在使用requiredHTML5 属性来验证字段。

如果用户不输入文本，则会显示 HTML5 错误。

如果任何必填字段留空，我想禁用提交按钮。

我该怎么做？

Answer 1

您可以使用 CSS 禁用按钮上的指针事件。

form:invalid>#submit {
  pointer-events: none;
}

<form>
  <label for="name">* Name</label>
  <input type="text" id="name" required><br>
  <label for="name">* Address</label>
  <input type="text" id="address" required><br>
  <input type="submit" value="Submit" id="submit">
</form>

您还可以使用 Javascript 禁用该按钮。

function disableField() {
  const invalidForm = document.querySelector('form:invalid');
  const submitBtn = document.getElementById('submit');
  if (invalidForm) {
    submitBtn.setAttribute('disabled', true);
  } else {
    submitBtn.disabled = false;
  }
}

disableField();

const inputs = document.getElementsByTagName("input");
for (let input of inputs) {
  input.addEventListener('change', disableField);
}

<form>
  <label for="name">* Name</label>
  <input type="text" id="name" required><br>
  <label for="name">* Address</label>
  <input type="text" id="address" required><br>
  <input type="submit" value="Submit" id="submit">
</form>