Question

我的表单创建了n行，每行有4列。列包含文本字段和选择框。每个元素都必须验证。我正在使用jquery validatio。当我提交按钮时，输入字段应该验证它是否没有值。

 <tbody>
    @for (var i = 0; i < Model.Add.Count; i++)
    {
        <tr>
            <td>@(i + 1)</td>
            <td>
                @*@Html.DropDownList("MatlId", null, htmlAttributes: new { @class = "form-control" })*@
                @Html.DropDownListFor(m => Model.Add[i].MatlId, new SelectList(ViewBag.MatlId, "Id", "Name"), "----Select Material----", htmlAttributes: new { @class = "form-control" })
            </td>
            <td>
                @Html.TextBoxFor(m => Model.Add[i].Product, new {@id="txtQuantity", @class = "form-control" })
                <span id="errmsg"></span>
            </td>
            <td>
                @Html.TextBoxFor(m => Add[i].Remarks, new { @id="txtRemark", @class = "form-control" })
                <span id="errRemark"></span>
            </td>
        </tr>
    }

</tbody>

验证jquery：

$(document).ready(function () {

    $('#txtQuantity').on('input', function () {

        var username = $(this).val();
        if (username.length < 1) {
            $("#errmsg").text('Field is required').show();
        }
        else {
            $("#errmsg").hide();
            var expNum = new RegExp(/^[0-9]+$/);
            if (!expNum.test(username)) {
                $("#errmsg").text('must have number').show();
            } else {
                $("#errmsg").hide();

            }

        }
        //alert(username);
    });

    $('#txtRemark').on('input', function () {

        var username = $(this).val();
        if (username.length < 1) {
            $("#errRemark").text('Enter Description').show()
            //$("#txtQuantity").css("border-bottom", "2px solid #F90A0A"); 
        }
        else {
            $("#errRemark").hide();

        }
        //alert(username);
    });
});

它仅验证第一行，如果我验证第二行，则错误消息显示在第一行本身，有时也不会发生。

Answer 1

ID必须是独一无二的 - 所以<span id="errmsg@(i + 1)">和<span id="errRemark@(i + 1)">
无论如何都不需要使用ID。让他们全班而不是

var expNum = new RegExp(/^[0-9]+$/);
$(function () {

    $('.txtQuantity').on('input', function () {
        var $errmsg = $(this).closest("tr").find(".errmsg");
        $errmsg.hide();
        var username = $(this).val();
        if (username.length < 1) {
            $errmsg.text('Field is required').show();
        }
        else {
            if (!expNum.test(username)) {
                $errmsg.text('must have number').show();
            }
        }
    });

    $('.txtRemark').on('input', function () {
        var $errRemark = $(this).closest("tr").find(".errRemark");
        $errRemark").hide();
        var username = $(this).val();
        if (username.length < 1) {
            $errRemark.text('Enter Description').show()
        }
    });
});

使用jquery在动态表上进行验证

1 个答案: