javascript - 在表单字段已满之前保持提交按钮处于禁用状态

Question

有人能看一下我的代码并看看我在这里遗漏了什么吗？

我有一个包含大量输入的多页表单，我想在所有字段填满之前禁用“下一页”按钮和最后的“提交”按钮。

我正在尝试以较小的规模重新创建流程，但在我的测试中，我似乎无法重新启用禁用的提交输入。我检查了控制台，JS 正在记录变量元素，所以我不确定我遗漏了什么。

function checkForm()
{
	var elements = document.forms[0].elements;

	var cansubmit= true;
	
	for(var i = 0; i < elements.length; i++)
	{
		if(elements[i].value.length == 0 || elements[i].value.length == "" || elements[i].value.length == null)
		{
			cansubmit = false;
		}
		document.getElementById("myButton").disabled = !cansubmit;	
	}
	
};

<form>
	<label for="firstName">First Name:</label> <input type="text" id="firstName" onkeyup="checkForm()" />
	
	<br />
	
	<label for="lastName">Last Name:</label> <input type="text" id="lastName" onkeyup="checkForm()" />
	
	<button type="button" id="myButton" disabled="disabled">Test me</button>
</form>

Answer 1

您的 elements 数组包括您的 button，它没有任何值。这将导致您的循环始终评估为 cansubmit = false;。

试试这个:https://jsfiddle.net/e00sorLu/2/

function checkForm()
{
    var elements = document.forms[0].elements;

    var cansubmit= true;
    for(var i = 0; i < elements.length; i++)
    {
        if(elements[i].value.length == 0 && elements[i].type != "button")
        {
            cansubmit = false;
        }

    }

    document.getElementById("myButton").disabled = !cansubmit;  
};