重置表单后如何将按钮状态重置为禁用？

Question

在此表单中，我已将提交按钮设置为禁用，直到表单字段完成。当按下提交按钮时， preventDefault() 运行，并显示警报。关闭该警报后，表单会重置，但按钮状态不会返回到禁用状态。

//validate form input
function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  } 
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
})

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

form input {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 5px;
}

form input[type=submit]:active {
  background-color: darkblue;
  color: white;
}

    <form name="myForm" id="myForm" action="/">
      <h3>My Form</h3>
      <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
      <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
      <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
      <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
      <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

      <!-- submit form -->
      <input type="submit" id="submitThis" value="Submit" disabled="disabled"/>
    </form>

Answer 1

重置后再次拨打validateForm即可：

//validate form input
function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  } 
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
  validateForm();
})

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

form input {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 5px;
}

form input[type=submit]:active {
  background-color: darkblue;
  color: white;
}

    <form name="myForm" id="myForm" action="/">
      <h3>My Form</h3>
      <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
      <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
      <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
      <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
      <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

      <!-- submit form -->
      <input type="submit" id="submitThis" value="Submit" disabled="disabled"/>
    </form>

Answer 2

如docs中提到的：

HTMLFormElement.reset() 方法恢复表单元素的默认值。此方法与单击表单的重置按钮执行相同的操作。

如果表单控件（例如重置按钮）的名称或 ID 为重置，它将屏蔽表单的重置方法。 它不会重置输入中的其他属性，例如disabled。

因此，您需要在调用表单reset() 后手动将按钮设置为禁用，例如：

myForm.reset();
document.getElementById("submitThis").disabled = true; 

演示：

//validate form input
function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  }
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
  document.getElementById("submitThis").disabled = true;
})

body{font-family:sans-serif;margin:0;padding:0;height:100vh}h2{text-align:center}form{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}form input{margin:.5em 0;padding:.5em;border-radius:5px}form input[type=submit]:active{background-color:#00008b;color:#fff}

<form name="myForm" id="myForm" action="/">
  <h3>My Form</h3>
  <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
  <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
  <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
  <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
  <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

  <!-- submit form -->
  <input type="submit" id="submitThis" value="Submit" disabled="disabled" />
</form>

Answer 3

提交表单后致电validateForm

function validateForm() {
  let formCheck = document.forms['myForm'].elements;
  let canSubmit = true;

  for (let i = 0; i < formCheck.length; i++) {
    if (formCheck[i].value.length == 0) canSubmit = false;
  }
  submitThis.disabled = !canSubmit;
}

//prevent form submission, alert if form is submitted, reset form
document.getElementById('submitThis').addEventListener('click', function(e) {
  e.preventDefault();
  alert('Awesomeness! The form will now reset.');
  myForm.reset();
  validateForm(); // changed here
})

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
}

h2 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

form input {
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: 5px;
}

form input[type=submit]:active {
  background-color: darkblue;
  color: white;
}

<form name="myForm" id="myForm" action="/">
  <h3>My Form</h3>
  <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" />
  <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" />
  <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" />
  <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" />
  <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />

  <!-- submit form -->
  <input type="submit" id="submitThis" value="Submit" disabled="disabled" />
</form>