循环遍历Form元素的JQuery问题

时间:2015-01-19 17:13:40

标签: javascript jquery html asp.net-mvc

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

这是表单的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

1 个答案:

答案 0 :(得分:3)

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

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

或者你可以给每个输入/ textarea一个类名并循环遍历所有这些。

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

JSFiddle示例。