javascript - JQuery 循环遍历表单元素时出现问题

Question

我试图循环遍历表单中的所有元素，以确保是否有任何元素为空，然后我的提交按钮仍处于禁用状态(初始加载时我将禁用它)，否则如果所有输入值都是输入然后启用提交按钮。

这是我的表单 onKeyup 函数，但此代码不起作用，也没有循环遍历元素。$(this) 始终返回“formId”，而不是循环遍历其元素

function formkeyup() {
    var empty = false;
    $('#formId').each(function () {
        if ($(this).val() === '') {
            empty = true;
        }
    });

    if (empty) {
        $('#SubmitId').attr('disabled', 'disabled'); 
    } else {
        $('#SubmitId').removeAttr('disabled');
        $("#SubmitId").css('font-weight', 'bold');
    }
}

我的 HTML 代码:

  <form action="~/Home/About" method="post" data-ajax="false" id="formId" onkeyup="formkeyup();">
<fieldset>
    <legend>Registration Form</legend>
    <div class="section">
        <h3>Step 1: Password</h3>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                <input type="password" name="pwd" id="pwd" autocomplete="off" value="@Model.Password" onkeyup=" return Validate() "/>
            </li>
            <li>
                @Html.LabelFor(m => m.ConfirmPassword)
                <input type="password" name="confirmpwd" id="confirmpwd" autocomplete="off" value="@Model.ConfirmPwd" onkeyup=" return Validate() "/>
            </li>
        </ol>
    </div>
    <div id="divSection2" class="section">
        <h3>Step 2: Age</h3>
        <div class="editor-label">
            @Html.LabelFor(model => model.Age)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Age)
            @Html.ValidationMessageFor(model => model.Age)
        </div>
    </div>

    <p>
<input type="button" id="SubmitId" name="SubmitId" value="Submit" />
    </p>
</fieldset>
</form>

非常感谢对此的任何帮助!

谢谢

WH

Answer 1

您对 $.each 函数的使用无效。您需要将要实际循环的元素传递给 $.each() 函数。

$.each('input', function() {
    **validation code here**
});

或者您可以为每个输入/文本区域指定一个类名并循环遍历所有这些。

$('#formID').each('.input', function() {
    **validation code here**
});

JSFiddle示例。