0

我（终于）深入研究了 JQuery，想知道如何在发布之前正确处理文本输入的验证。我有一个 ASPX 页面，它将遍历我的模型的一部分，为每个循环调用一个用户控件。我还有一个 JQuery Add 链接，它将向集合中添加一个新的（空白）用户控件。

该页面如下所示： 

    <h1>Create Document List</h1>

    <% Html.EnableClientValidation(); %>

    <% using (Html.BeginForm("CreateList", "Documents", FormMethod.Post, new { @class = "list", @enctype = "multipart/form-data" })) 
    { %>
        <%= Html.AntiForgeryToken() %>

        <div id="editorRows">
            <% foreach(var q in ViewData.Model.DocumentAndFileList)
                   Html.RenderPartial("DocEditRow", q);
            %>
        </div>
        <br />

        <%= Html.ActionLink("Add another...", "Add", null, new { id = "addItem" }) %>

        <br />
        <br />
        <br />

        <%= Html.SubmitButton("btnSave", "Save Document List")%>
        <%= Html.Button("btnCancel", "Cancel", HtmlButtonType.Button, "window.location.href = '" + Html.BuildUrlFromExpressionForAreas<DocumentsController>(c => c.Index()) + "';") %>
    <% } %>
</asp:Content>

用户控件如下所示：

<div class="editorRow">
    <% using (Html.BeginCollectionItem("docs"))
       { %>

        <%= Html.Hidden("Document.Id", (Model != null) ? Model.Id : 0)%>

        <label for="Number">Document Name:</label>
        <%= Html.TextBox("Number", (Model != null) ? Model.Number : "", new { @size = "50", @maxlength = "255" })%>
        <%= Html.ValidationMessageFor(m => m.Number) %>

        &nbsp;

        <% if (Model != null && Model.FileName != null && Model.FileName.Length > 0)
           { %>
            <label>Current File:</label>
            <%= Model.FileName%>
        <% }
           else
           { %>
            <label>
                File Upload:
                <%= Html.FileBoxFor(m => m.HttpPostedFileBase)%>
            </label>
        <% } %>
        <a href="#" class="deleteRow">delete</a>
    <% } %>
</div>

我听从了 Scott Gu 在他博客上的一篇旧帖子上的建议。出于某种原因，我没有得到任何验证。这个项目的以前的开发人员使用了很多 JQuery，所以我现在正试图让 JQuery 验证工作，但真的不知道从哪里开始。谷歌搜索似乎给我带来了大约 500 种不同的方法来做到这一点。任何指针将不胜感激。

TIA

笔记：

我在我的页面中添加了以下内容：

<asp:Content ID="myScript" ContentPlaceHolderID="pageScript" runat="server">
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#LoadDocs").validate();
            $.validator.unobtrusive.parse("#LoadDocs");
        });
    </script>
</asp:Content>

这似乎部分有效。如果我向我的集合添加几行新行，如果文本框为空，则只有第一行会弹出消息。我还添加了一个

类=“必需”

我所有的输入。

不过，我仍在努力让它 100% 工作。有什么建议么？

4

1 回答 1

0

我从来没有想出使用内置验证器的方法。我最终做的是：

<asp:Content ID="myScript" ContentPlaceHolderID="pageScript" runat="server">
    <script type="text/javascript" language="javascript">
        $().ready(function () {
            $("#addItem").click(function () {
                //alert('hi');

                $.ajax({
                    url: this.href,
                    cache: false,
                    success: function (html) { $("#editorRows").append(html); }
                });
                return false;
            });

            $("a.deleteRow").live("click", function () {
                $(this).parents("div.editorRow:first").remove();
                return false;
            });
        });

        function OnDocUpload() {
            var editorRows = $('.editorRow');
            //alert(editorRows.length);
            var isGood = true;
            editorRows.each(function () {
                var input = $(this).children('.required.input').first();
                var msg = $(this).children('.display_message').first();
                //alert(input.val().length + " | " + msg.html);
                if (input.val().length < 1) {
                    isGood = false;
                    input.css('background-color', '#FEADCE');
                    msg.text("A document name is required!");
                } else {
                    input.css('background-color', '#FAFAD2');
                    msg.text("");
                }
            });
            return isGood;
        }

        function SubmitForm() {
            if (OnDocUpload()) {
                var frm = $("#LoadDocs");
                frm.submit();
                //$("#LoadDocs").submit();
            }
        }
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

    <h1>Create Document List</h1>

    <% 
    Html.EnableClientValidation();
    using (Html.BeginForm("CreateList", "CIPDocuments", FormMethod.Post, new { @class = "wufoo", @enctype = "multipart/form-data", @id = "LoadDocs" })) 
    { %>
        <%= Html.AntiForgeryToken() %>

        <div id="editorRows">
            <% foreach(var cipDocument in ViewData.Model.CIPDocumentAndFileList)
                   Html.RenderPartial("DocEditRow", cipDocument);
            %>
        </div>
        <br />

        <%= Html.ActionLink("Add another...", "Add", null, new { id = "addItem" }) %>

        <br />
        <br />
        <br />

        <%= Html.Button("btnSave", "Save Document List", HtmlButtonType.Button, "SubmitForm();")%>
        <%= Html.Button("btnCancel", "Cancel", HtmlButtonType.Button, "window.location.href = '" + Html.BuildUrlFromExpressionForAreas<CIPDocumentsController>(c => c.Index()) + "';") %>
    <% } %>
</asp:Content>
于 2013-01-02T17:07:16.533 回答