Question

是否有人能够查看我的代码，看看我在这里失踪了什么？

我有一个包含大量输入的多页表单，我想保留＆＃34;下一页＆＃34;按钮和决赛＆＃34;提交＆＃34;按钮被禁用，直到所有字段都已满。

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

＆＃13;

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;	
	}
	
};

＆＃13;

<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>

＆＃13;

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;  
};

Answer 2

答案已被接受，但您可以考虑以下其他一些事项：

现在设置方式，除了空字符串""之外的任何其他内容，您只需设置button.disabled = false并启用按钮。

您正在检查value.length 3次，但您确实想要请改为.value。 length属性为only a numeric value，表示字符串中有多少代码单元 - 它永远不会成为 ""或null，所以您唯一真正检查的就是长度为0的空字符串的第一个条件。

您还没有考虑空白字符串中的多个空格，因此" "有效）...或者特殊字符，因此这有效：(function goodByeWorld(evil){//do the bad things})();
您在所有表单元素上运行checkForm()函数每次击键后（包括<button>）。这是不必要的。

除了包括<button>之外，已在接受的答案中指出了这一点。将始终导致此失败，您应该使用内联错误检查验证每个单独的表单元素（最好），或者在提交之前验证所有这些（最好是服务器端验证并在提交后将其踢回）。

您可以绑定到onblur()，并在该字段失去焦点后将当前元素的值作为参数发送。例如更改为：function checkValue(value) {//validate the value}）和HTML中的onblur = checkValue(this)或者最好是位于JS文件中的非内联事件处理程序。

你仍然可以在每次按键后检查onkeyup = checkValue(this)，但是将函数更改为仅检查1个元素而不是检查t.h.e.整个。形成。几十次。

这种方法可让您单独跟踪每个单独的表单元素的有效性（这里有很多选项取决于＆＃34;有效＆＃34;表示 - 存储值数组，具有值的对象或＆＃34;有效/无效＆＃34;标志等，打开字段标签以验证this的不同类型的信息）。您还可以对各个元素运行其他验证（例如，最小/最大名称长度，消除特殊字符等），并在每个表单元素旁边显示实时错误检查消息。
考虑到您希望此代码执行的操作，您将默认为cansubmit = true并没有多大意义。使用!cansubmit只会让您自己感到困惑。其他人阅读代码。为了便于阅读，请考虑将其反转为disableSubmit，以使其与button.disabled状态同步，true状态应为false或while (cin >> number) { // this loop is endless, because you can always read the user input data (unless some exception happen) while (number != -500) { n = new node; // you already have data allocated. no need to allocate it once more n->data = number; temp->next = n; temp = n; // as was already mentioned: set n->next to NULL } }。

Answer 3

或者你可以使用jQuery。

    <script type="text/javascript">
        function checkForm() {
            var cansubmit = false;
            $('form input[type="text"]').each(function (index, element) {
                if (element.value == "") {
                    cansubmit = true;
                }
            });
            document.getElementById("myButton").disabled = cansubmit;
        }
    </script>

保持提交按钮禁用直到表单字段已满

3 个答案: