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

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

如文档中所述：

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>