表行中的Jquery验证(生成的行)

时间:2015-01-29 23:26:25

标签: javascript jquery .net

我有一个带有表单的页面,以及表单下的表格。在表中是多行,从我的控制器中的数据生成。每行也是一个可编辑的记录,单击“编辑”按钮即可实例化自己的表单。我正在尝试验证表中的各个行,但我的jquery似乎根本没有启动,因此验证完全失败。

代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage<CampaignViewModel>" %>

<asp:Content ID="Content5" ContentPlaceHolderID="TitleContent" runat="server">
    Modify Campaign Template
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="server">
    <h2>Modify Campaign Template</h2>
    <form action="/CampaignBuilder/ModifyCampaignTemplate/<%=Model.CampaignTemplate.CampaignTemplate_id %>" id="form1" method="post">
        <fieldset>
            <!-- REMOVED TO FOCUS ON THE REPEATER FORM -->
        </fieldset>
    </form>

    <a href="/CampaignBuilder/AddNewTaskTemplate/<%=Model.CampaignTemplate.CampaignTemplate_id%>">Add new task</a><br/>

    <table class="table table-striped">
        <tr>
            <th>Step</th>
            <th>Type</th>
            <th>Task Name</th>
            <th>Description</th>
            <th>Assign to CCR</th>
            <th>Dynamic</th>
            <th>Days</th>
            <th>Email Template</th>
            <th>Action</th>
        </tr>
        <%
            if (Model.CampaignTaskTemplate != null)
            {
                foreach (var item in Model.CampaignTaskTemplates)
                {
                    if (item.CampaignTaskTemplate_id != Model.CampaignTaskTemplate.CampaignTaskTemplate_id)
                    {
        %>
        <tr>
            <td><%= item.StepID %></td>
            <td><%= Model.GetTypeName(item.Type) %></td>
            <td><%= item.Name %></td>
            <td><%= item.Description %></td>
            <td><input type="checkbox" <% if (item.AssignToCCR)
                                          { %>Checked<% } %> disabled /></td>
            <td><input type="checkbox" <% if (item.DynamicTiming)
                                          { %>Checked<% } %> disabled /></td>
            <td><%= item.Days %></td>
            <td></td>
            <td><a href="/CampaignBuilder/ModifyCampaignTemplate/<%= Model.CampaignTemplate.CampaignTemplate_id %>?task_id=<%= item.CampaignTaskTemplate_id %>">Edit</a>
            &nbsp;<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a>&nbsp;</td>
        </tr>
        <%          }
                    else
                    {
        %>
        <form method="post" id="rowForm" name="rowForm" action="/CampaignBuilder/ModifyCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">
            <tr bgcolor="#f0f7e7">
                <td>
                    <select name="selStepID" style="width: auto;">
                        <% for (int i = 1; i <= Model.CampaignTaskTemplates.Count(); i++) { %><option <% if (i == item.StepID) { %>selected<% } %>><%= i %></option><% } %>
                    </select>
                </td>
                <td>
                    <select id="selTaskType" name="selTaskType" style="width: auto;">
                        <option value="0">Reminder</option>
                        <option value="1">Email</option>
                        <option value="2">Pop-By</option>
                        <option value="3">Call</option>
                    </select>
                </td>
                <td><input type="text" name="txtTaskName" id="txtTaskName" value="<%= item.Name %>" maxlength="255" placeholder="Task Name" required /></td>
                <td><input type="text" name="txtTaskDescription" id="txtTaskDescription" value="<%= item.Description %>" maxlength="255" placeholder="Task Description" /></td>
                <td><input type="checkbox" name="chkAssignToCCR" <% if (item.AssignToCCR)
                                                                    { %>Checked<% } %> /></td>
                <td><input type="checkbox" name="chkDynamic" <% if (item.DynamicTiming)
                                                                { %>Checked<% } %> /></td>
                <td><input type="number" name="txtDays" value="<%= item.Days %>" style="width: 50px" maxlength="4" max="365" min="-365" required /></td>
                <td>
                    <% if (item.Type == 1 && item.EmailTemplate_id > 0)
                       { %>
                    <a href="/CampaignBuilder/AddEditEmailTemplate?EmailTemplateId=<%= item.EmailTemplate_id %>&TaskTemplateId=<%= item.CampaignTaskTemplate_id %>">Edit</a>
                    <% }
                       else if (item.Type == 1 && item.EmailTemplate_id == 0)
                       { %>
                    <a href="/CampaignBuilder/AddNewTaskTemplate2/<%= item.CampaignTaskTemplate_id %>">Add</a>
                    <% } %>
                </td>
                <td nowrap>
                    <input type="submit" value="Save" class="btn color" name="fmrTwoSubmit" id="fmrTwoSubmit" />
                    <input type="button" value="cancel" class="btn" onclick="window.location.href ='/CampaignBuilder/ModifyCampaignTemplate/<%= Model.CampaignTemplate.CampaignTemplate_id %>'" />
                </td>
            </tr>
        </form>
        <script language="javascript" type="text/javascript">$('#selTaskType option[value=<%= item.Type %>]').attr("selected", "selected");</script>
        <%          }
                }
            }
            else
            { 
                foreach (var item in Model.CampaignTaskTemplates)
                {
        %>
        <tr>
            <td><%= item.StepID %></td>
            <td><%= Model.GetTypeName(item.Type) %></td>
            <td><%= item.Name %></td>
            <td><%= item.Description %></td>
            <td><input type="checkbox" <% if (item.AssignToCCR) { %>Checked<% } %> disabled="disabled" /></td>
            <td><input type="checkbox" <% if (item.DynamicTiming) { %>Checked<% } %> disabled="disabled" /></td>
            <td><%= item.Days %></td>
            <td></td>
            <td nowrap>
                <a href="/CampaignBuilder/ModifyCampaignTemplate/<%= Model.CampaignTemplate.CampaignTemplate_id %>?task_id=<%= item.CampaignTaskTemplate_id %>">Edit</a>
                &nbsp;<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a>&nbsp;
            </td>
        </tr>
        <%      }
           } %>
    </table>
    <br />
    <br />
</asp:Content>

<asp:Content ID="Content7" ContentPlaceHolderID="AdditionalScripts" runat="server">
    <script src="../../Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tinysort.min.js" type="text/javascript"></script>
    <script src="../../Scripts/additional-methods.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#emailSearchArea').hide();
            $('#userNotFound').hide();

            $('#form1').validate({
                rules: {
                    txtName: {
                        required: true
                        , maxlength: 255
                    }
                },
                messages: {
                    txtName: {
                        required: "Please enter a Campain Name.",
                        maxlength: "Campain Name may be no longer than 255 characters."
                    }
                }
            });

            $("#rowForm").validate({
                rules: {
                    "txtTaskName": {
                        required: true,
                        maxlength: 255
                    },
                    "txtTaskDescription": {
                        maxlength: 255
                    },
                    "txtDays": {
                        required: true,
                        max: 365,
                        min: -365,
                        TextOnly: "^[0-9\-]+$"
                    }
                },
                messages: {
                    "txtTaskName": {
                        required: "Please enter a Task Name.",
                        maxlength: "Task Name may be no longer than 255 characters."
                    },
                    "txtTaskDescription": {
                        maxlength: "Description may be no longer than 255 characters."
                    },
                    "txtDays": {
                        required: "Please enter the number of days.",
                        max: "Days must be between -365 and 365.",
                        min: "Days must be between -365 and 365.",
                        TextOnly: "Days must be a whole number between -365 and 365."
                    }
                }
            });

            $('#selType option[value=<%=Model.CampaignTemplate.CampaignType%>]').attr("selected", "selected");
            $('#selTarget option[value=<%=Model.CampaignTemplate.Target %>]').attr("selected", "selected");
        });

        $("#selOwner").change(function () {
            var value = this.value;
            if (this.value == "4") {
                $('#emailSearchArea').show();
            } else {
                $('#emailSearchArea').hide();
            }
        });

        function ValidateEmail() {
            $('#validateButton').html('Loading...')
            $('#userMessage').html("Searching for user...");
            $('#btnSave').hide();
            $.post('/CampaignBuilder/AgentSearch', { email: $('#txtEmail').val() }, function (data) {
                if (data.error == false) {
                    $('#newOwnerId').val(data.id);
                    $('#userMessage').html("Save to set owner to: " + data.fullname);
                } else {
                    $('#newOwnerId').val('');
                    $('#userMessage').html("User not found.");
                }

                $('#btnSave').show();
                $('#validateButton').html('Validate');
            });
        };

        var replaceRegex = /[^\u0000-\u00FF]/g;
        $("#txtDescription").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtDescription").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtDescription").val();
                $("#txtDescription").val(text.replace(replaceRegex, ''));
            }, 100);
        });
        $("#txtName").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtName").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtName").val();
                $("#txtName").val(text.replace(replaceRegex, ''));
            }, 100);
        });
        $("#txtTaskDescription").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtTaskDescription").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtTaskDescription").val();
                $("#txtTaskDescription").val(text.replace(replaceRegex, ''));
            }, 100);
        });
        $("#txtTaskName").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtTaskName").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtTaskName").val();
                $("#txtTaskName").val(text.replace(replaceRegex, ''));
            }, 100);
        });
    </script>
</asp:Content>

表中转发器循环中的表单是$(“#rowForm”)。这就是我想要验证的形式。

2 个答案:

答案 0 :(得分:0)

这里有一个适合我的示例代码:

<telerik:GridTemplateColumn DataField="Day" HeaderText="Day" UniqueName="DayTemplateColumn">
                    <ItemTemplate>
                        <%# Eval("DayDisplay")%>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <telerik:RadDropDownList Width="100px" runat="server" ID="DayDropDown" class="course-dropdown" />
                        <asp:RequiredFieldValidator ID="rfvDay" runat="server" Display="Dynamic" ValidationGroup="RadGridValidationGroup"
                            CssClass="required" ControlToValidate="DayDropDown" ErrorMessage="Select Day" />
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>

通过编写类似的代码,它也适用于这种情况。

答案 1 :(得分:0)

答案结果很简单:将验证移到带有表单的行中。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage<CampaignViewModel>" %>

<asp:Content ID="Content5" ContentPlaceHolderID="TitleContent" runat="server">
    Modify Campaign Template
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="PageContent" runat="server">
    <h2>Modify Campaign Template</h2>
    <form action="/CampaignBuilder/ModifyCampaignTemplate/<%=Model.CampaignTemplate.CampaignTemplate_id %>" id="form1" method="post">
        <fieldset>
            <!-- REMOVED TO FOCUS ON THE REPEATER FORM -->
        </fieldset>
    </form>

    <p>Add or edit existing tasks. To edit, click in the row to enable edit mode. If task is "Dynamic", the days field will indicate the number of days due AFTER the previous Step ID task. Otherwise, the Days field will indicate the number of days due after the campaign is scheduled.</p>

    <a href="/CampaignBuilder/AddNewTaskTemplate/<%=Model.CampaignTemplate.CampaignTemplate_id%>">Add new task</a><br/>

    <table class="table table-striped">
        <tr>
            <th>Step</th>
            <th>Type</th>
            <th>Task Name</th>
            <th>Description</th>
            <th>Assign to CCR</th>
            <th>Dynamic</th>
            <th>Days</th>
            <th>Email Template</th>
            <th>Action</th>
        </tr>
        <%
            if (Model.CampaignTaskTemplate != null)
            {
                foreach (var item in Model.CampaignTaskTemplates)
                {
                    if (item.CampaignTaskTemplate_id != Model.CampaignTaskTemplate.CampaignTaskTemplate_id)
                    {
        %>
        <tr>
            <td><%= item.StepID %></td>
            <td><%= Model.GetTypeName(item.Type) %></td>
            <td><%= item.Name %></td>
            <td><%= item.Description %></td>
            <td><input type="checkbox" <% if (item.AssignToCCR) { %>Checked<% } %> disabled /></td>
            <td><input type="checkbox" <% if (item.DynamicTiming) { %>Checked<% } %> disabled /></td>
            <td><%= item.Days %></td>
            <td></td>
            <td><a href="/CampaignBuilder/ModifyCampaignTemplate/<%= Model.CampaignTemplate.CampaignTemplate_id %>?task_id=<%= item.CampaignTaskTemplate_id %>">Edit</a>
            &nbsp;<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a>&nbsp;</td>
        </tr>
        <%          }
                    else
                    {
        %>
        <form method="post" id="rowForm" name="rowForm" action="/CampaignBuilder/ModifyCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">
            <tr bgcolor="#f0f7e7">
                <td>
                    <select name="selStepID" style="width: auto;">
                        <% for (var i = 1; i <= Model.CampaignTaskTemplates.Count(); i++) { %><option <% if (i == item.StepID) { %>selected<% } %>><%= i %></option><% } %>
                    </select>
                </td>
                <td>
                    <select id="selTaskType" name="selTaskType" style="width: auto;">
                        <option value="0">Reminder</option>
                        <option value="1">Email</option>
                        <option value="2">Pop-By</option>
                        <option value="3">Call</option>
                    </select>
                </td>
                <td><input type="text" name="txtTaskName" id="txtTaskName" value="<%= item.Name %>" maxlength="255" placeholder="Task Name" required /></td>
                <td><input type="text" name="txtTaskDescription" id="txtTaskDescription" value="<%= item.Description %>" maxlength="255" placeholder="Task Description" /></td>
                <td><input type="checkbox" name="chkAssignToCCR" <% if (item.AssignToCCR) { %>Checked<% } %> /></td>
                <td><input type="checkbox" name="chkDynamic" <% if (item.DynamicTiming) { %>Checked<% } %> /></td>
                <td><input type="number" name="txtDays" value="<%= item.Days %>" style="width: 70px" maxlength="4" max="365" min="-365" required /></td>
                <td>
                    <% if (item.Type == 1 && item.EmailTemplate_id > 0) { %>
                    <a href="/CampaignBuilder/AddEditEmailTemplate?EmailTemplateId=<%= item.EmailTemplate_id %>&TaskTemplateId=<%= item.CampaignTaskTemplate_id %>">Edit</a>
                    <% } else if (item.Type == 1 && item.EmailTemplate_id == 0) { %>
                    <a href="/CampaignBuilder/AddNewTaskTemplate2/<%= item.CampaignTaskTemplate_id %>">Add</a>
                    <% } %>
                </td>
                <td nowrap>
                    <input type="submit" value="Save" class="btn color" name="fmrTwoSubmit" id="fmrTwoSubmit" />
                    <input type="button" value="cancel" class="btn" onclick="window.location.href ='/CampaignBuilder/ModifyCampaignTemplate/<%= Model.CampaignTemplate.CampaignTemplate_id %>'" />
                </td>
            </tr>
        </form>
        <script language="javascript" type="text/javascript">
            $('#selTaskType option[value=<%= item.Type %>]').attr("selected", "selected");
            //Moved the Validation here, so it's in each row.
            $("#rowForm").validate({
                rules: {
                    "txtTaskName": {
                        required: true,
                        maxlength: 255
                    },
                    "txtTaskDescription": {
                        maxlength: 255
                    },
                    "txtDays": {
                        required: true,
                        max: 365,
                        min: -365,
                        TextOnly: "^[0-9\-]+$"
                    }
                },
                messages: {
                    "txtTaskName": {
                        required: "Please enter a Task Name.",
                        maxlength: "Task Name may be no longer than 255 characters."
                    },
                    "txtTaskDescription": {
                        maxlength: "Description may be no longer than 255 characters."
                    },
                    "txtDays": {
                        required: "Please enter the number of days.",
                        max: "Days must be between -365 and 365.",
                        min: "Days must be between -365 and 365.",
                        TextOnly: "Days must be a whole number between -365 and 365."
                    }
                }
            });
        </script>
        <%          }
                }
            }
            else
            { 
                foreach (var item in Model.CampaignTaskTemplates)
                {
        %>
        <tr>
            <td><%= item.StepID %></td>
            <td><%= Model.GetTypeName(item.Type) %></td>
            <td><%= item.Name %></td>
            <td><%= item.Description %></td>
            <td><input type="checkbox" <% if (item.AssignToCCR) { %>Checked<% } %> disabled="disabled" /></td>
            <td><input type="checkbox" <% if (item.DynamicTiming) { %>Checked<% } %> disabled="disabled" /></td>
            <td><%= item.Days %></td>
            <td></td>
            <td nowrap>
                <a href="/CampaignBuilder/ModifyCampaignTemplate/<%= Model.CampaignTemplate.CampaignTemplate_id %>?task_id=<%= item.CampaignTaskTemplate_id %>">Edit</a>
                &nbsp;<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a>&nbsp;
            </td>
        </tr>
        <%      }
            } %>
    </table>
    <br />
    <br />
</asp:Content>

<asp:Content ID="Content7" ContentPlaceHolderID="AdditionalScripts" runat="server">
    <script src="../../Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tinysort.min.js" type="text/javascript"></script>
    <script src="../../Scripts/additional-methods.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#emailSearchArea').hide();
            $('#userNotFound').hide();

            $('#form1').validate({
                rules: {
                    txtName: {
                        required: true
                        , maxlength: 255
                    }
                },
                messages: {
                    txtName: {
                        required: "Please enter a Campain Name.",
                        maxlength: "Campain Name may be no longer than 255 characters."
                    }
                }
            });



            $('#selType option[value=<%=Model.CampaignTemplate.CampaignType%>]').attr("selected", "selected");
            $('#selTarget option[value=<%=Model.CampaignTemplate.Target %>]').attr("selected", "selected");
        });

        $("#selOwner").change(function () {
            var value = this.value;
            if (this.value == "4") {
                $('#emailSearchArea').show();
            } else {
                $('#emailSearchArea').hide();
            }
        });

        function ValidateEmail() {
            $('#validateButton').html('Loading...')
            $('#userMessage').html("Searching for user...");
            $('#btnSave').hide();
            $.post('/CampaignBuilder/AgentSearch', { email: $('#txtEmail').val() }, function (data) {
                if (data.error == false) {
                    $('#newOwnerId').val(data.id);
                    $('#userMessage').html("Save to set owner to: " + data.fullname);
                } else {
                    $('#newOwnerId').val('');
                    $('#userMessage').html("User not found.");
                }

                $('#btnSave').show();
                $('#validateButton').html('Validate');
            });
        };

        var replaceRegex = /[^\u0000-\u00FF]/g;
        $("#txtDescription").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtDescription").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtDescription").val();
                $("#txtDescription").val(text.replace(replaceRegex, ''));
            }, 100);
        });
        $("#txtName").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtName").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtName").val();
                $("#txtName").val(text.replace(replaceRegex, ''));
            }, 100);
        });
        $("#txtTaskDescription").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtTaskDescription").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtTaskDescription").val();
                $("#txtTaskDescription").val(text.replace(replaceRegex, ''));
            }, 100);
        });
        $("#txtTaskName").keypress(function (e) {
            if (replaceRegex.test(String.fromCharCode(e.keyCode || e.which))) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
        $("#txtTaskName").on('paste', function () {
            setTimeout(function () {
                var text = $("#txtTaskName").val();
                $("#txtTaskName").val(text.replace(replaceRegex, ''));
            }, 100);
        });
    </script>
</asp:Content>
相关问题