Javascript 表行中的Jquery验证（生成的行）
我有一个带表格的页面，表格下面有一个表格。表中有多行，它们是从控制器中的数据生成的。每一行也是一个可编辑的记录，单击Edit按钮可以实例化它自己的表单。我试图验证表中的各行，但我的jquery似乎根本没有启动，因此验证完全失败 守则：Javascript 表行中的Jquery验证（生成的行）,javascript,jquery,.net,Javascript,Jquery,.net,我有一个带表格的页面，表格下面有一个表格。表中有多行，它们是从控制器中的数据生成的。每一行也是一个可编辑的记录，单击Edit按钮可以实例化它自己的表单。我试图验证表中的各行，但我的jquery似乎根本没有启动，因此验证完全失败 守则： <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage<Campai
<%@ 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>
<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a> </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>
<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a>
</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>
表中的repeater循环中的表单是$rowForm。这就是我试图验证的表单。这里我有一个适用于我的示例代码：
<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>
通过编写类似的代码，它在这种情况下也应该可以工作。答案非常简单：将验证移到表单所在的行中
<%@ 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>
<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a> </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>
<a href="/CampaignBuilder/DeleteCampaignTaskTemplate/<%= item.CampaignTaskTemplate_id %>">Delete</a>
</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>
添加编辑模板和相应的验证器，如必填字段、自定义等……如果我使用Telerik工具{我从来没有尝试过这么做}或b GridView，编辑模板将是一种有效的使用方法。但我不是在开发那种应用程序。编辑模板位于代码的Foreach循环中的Else子句中。应该有一种方法可以验证这一点，而不必重新构建整个页面，从而使用我的应用程序中其他任何地方都没有使用的方法。您是否在开发人员工具中进行调试，以及那里的日志说明了什么？调试工具会跳过验证调用，就像它不在那里一样。form1验证了吗？是的，验证很好。我刚刚想出了如何使内联表单也有效。