我有一个asp.net内容表单，其中包含几个文本框。我需要为这些文本框实现JQuery必需的字段验证。在下面给出代码，我无法弄清楚如何使用JQuery完成它。即使花了一些时间谷歌搜索，我感到困惑。感谢您的帮助
<%@ MasterType VirtualPath="~/Shared/Module.master" %>
<%@ Page MasterPageFile="~/Shared/Module.master" Language="C#" AutoEventWireup="true"
CodeFile="CreateObjective.aspx.cs" Inherits="SG.ALD.Schema.Modules.Manage.CreateObjective"
ClientIDMode="Static" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<%@ Register Assembly="SG.Practices.Framework.CoreServices.Client.Web.WebUIControls"
Namespace="SG.Practices.Framework.CoreServices.Client.Web.WebUIControls" TagPrefix="cc1" %>
<%@ Register Src="../../../SharedControl/AuditDataControl.ascx" TagName="AuditDataControl"
TagPrefix="uc1" %>
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="SubModuleContent">
<script type="text/javascript" src="C:\HOMEWARE\Aldschema\trunk\Src\Webserver\WEBUI\Scripts\jquery-1.4.1-vsdoc.js">
PageInitialization();
$('input[id$=txtObjectiveCode]').keydown(function () {
alert('jquery!!!!!!');
});
function PageInitialization() {
PageJQInitialization();
}
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
PageJQInitialization();
}
}
}
</script>
<table border="0" cellspacing="0" cellpadding="0" width="660px" align="center">
<tr>
<td width="5px" class="tableleft">
</td>
<td class="tablemiddle">
<asp:Image runat="server" ID="roleImage" SkinID="gridHeaderImage" /><asp:Label runat="server"
ID="moduleHeaderCaption" />
</td>
<td width="5px" class="tableright">
</td>
</tr>
<tr>
<td valign="top" class="tablelineleft" width="1px">
</td>
<td valign="top" border="0" cellspacing="0" cellpadding="0">
<table width="600px">
<tr>
<td align="center" colspan="2">
<asp:Label ID="lblmsg" runat="server" CssClass="lgt" ForeColor="#CC0000"></asp:Label>
</td>
</tr>
<tr>
<td style="width: 30%" align="right">
</td>
<td style="width: 70%" align="left">
</td>
</tr>
<tr>
<td style="width: 30%; height: 22px;" align="right" class="lgt">
<span runat="server" style="color: #ff0033">*</span>Objective Code:
</td>
<td style="width: 70%; height: 22px;" align="left" class="txtwt">
<asp:TextBox ID="txtObjectiveCode" runat="server" TabIndex="1" MaxLength="50"
SkinID="textboxMandatory" ></asp:TextBox>
<%-- <tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span> Select City:
</td>
<td style="width: 70%" align="left" class="txtwt">
<div class="mandatoryField" style="width:150px">
<asp:DropDownList ID="drpCity" TabIndex="6" runat="server" AutoPostBack="true" Width="150px" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span> Select Location:
</td>
<td style="width: 70%" align="left" class="txtwt">
<div class="mandatoryField" style="width:150px">
<asp:DropDownList ID="drpSite" Width="150px" TabIndex="7" runat="server">
</asp:DropDownList>
</div>
</td>
</tr>--%> <%-- <tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span> Select City:
</td>
<td style="width: 70%" align="left" class="txtwt">
<div class="mandatoryField" style="width:150px">
<asp:DropDownList ID="drpCity" TabIndex="6" runat="server" AutoPostBack="true" Width="150px" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span> Select Location:
</td>
<td style="width: 70%" align="left" class="txtwt">
<div class="mandatoryField" style="width:150px">
<asp:DropDownList ID="drpSite" Width="150px" TabIndex="7" runat="server">
</asp:DropDownList>
</div>
</td>
</tr>--%>
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span>Description:
</td>
<td style="width: 70%" align="left" class="txtwt">
<asp:TextBox ID="txtDescription" runat="server" Columns="30" TabIndex="2" MaxLength="25"
SkinID="textboxMandatory" Width="349px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
</td>
<td style="width: 70%" align="left" class="txtwt">
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
</td>
<td style="width: 70%" align="left" class="txtwt">
</td>
</tr>
<%-- <tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span> Select City:
</td>
<td style="width: 70%" align="left" class="txtwt">
<div class="mandatoryField" style="width:150px">
<asp:DropDownList ID="drpCity" TabIndex="6" runat="server" AutoPostBack="true" Width="150px" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
<span style="color: #ff0033">*</span> Select Location:
</td>
<td style="width: 70%" align="left" class="txtwt">
<div class="mandatoryField" style="width:150px">
<asp:DropDownList ID="drpSite" Width="150px" TabIndex="7" runat="server">
</asp:DropDownList>
</div>
</td>
</tr>--%>
<tr>
<td style="width: 30%" align="right" class="lgt">
</td>
<td style="width: 70%" align="left" class="txtwt">
</td>
</tr>
<tr>
<td style="width: 30%" align="right" class="lgt">
</td>
<td style="width: 70%" align="left" class="txtwt">
</td>
</tr>
<tr>
<td style="width: 30%" align="right">
</td>
<td style="width: 0%" align="left">
<table style="width: 100%">
<tr>
<td width="10%">
<asp:Button ID="btnSave" runat="server" TabIndex="10" Text="Save" CssClass="button_70x20"
OnClick="btnSave_Click" AccessKey="a" height="22px" width="71px" />
</td>
<td>
<asp:Button ID="btnCancel" runat="server" TabIndex="11" Text="Cancel" CausesValidation="False"
CssClass="button_70x20 cancel" OnClick="btnCancel_Click" AccessKey="c"
Width="71px" />
<asp:Button ID="btnAudit" runat="server" Text="View Audit" TabIndex="12" CausesValidation="False"
CssClass="button_90x20" OnClick="btnAudit_Click" AccessKey="w"
Visible="False" Width="136px" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" class="tablelineright">
</td>
</tr>
<tr>
<td class="tablefooterleft">
</td>
<td class="tablefootermiddle">
</td>
<td class="tablefooterright">
</td>
</tr>
</table>
<uc1:AuditDataControl ID="AuditDataControl1" runat="server" />
</asp:Content>
答案 0 :(得分：3)
1. Load the Jquery framework and the JQuery tooltip plugin. Also load the stylesheet for use by the tooltip. Note: Code below shows we're loading a javascript file.
<script src="Scripts/addrecord-script.js" type="text/javascript"></script>
Inside the javascript file 3 scripts are being loaded:
loadJavaScriptFile("Scripts/jquery-1.4.1.min.js");
loadJavaScriptFile("Scripts/jquery.validate.min.js");
loadJavaScriptFile("Scripts/jquery.metadata.min.js");
function loadJavaScriptFile(jspath) {
document.write('<script type="text/javascript" src="' + jspath + '"><\/script>');
}
2. Initialize the JQuery UI Tooltip plugin.
$(function () {
InitializeValidation();
});
function InitializeValidation() {
var validator = $("#MasterPageForm1").bind("invalid-form.validate", function () { }).validate({
errorElement: "em",
errorPlacement: function (error, element) {
error.appendTo(element.parent("td").next("td"));
},
success: function (label) {
label.text("ok!").addClass("success");
}
});
}
There are a few things to notice here. We're telling the plugin to validate everything inside the "#MasterPageForm1" form. "#MasterPageForm1" is the form ID which is located in the master page. See code below.
<form id="MasterPageForm1" class="cmxform" runat="server">
Another thing to notice in the initalization is that the errors will be placed in the next td tag from the object being validated.
errorPlacement: function (error, element) {
error.appendTo(element.parent("td").next("td"));
And lastly, when the requirement for validation is satisfied a text "ok" is shown as well as a class call "success" is added. The added class just shows a check mark before the "ok" text.
success: function (label) {
label.text("ok!").addClass("success");
}
3. Add an inline error validation in the CssClass property of the ASP.NET web control.
<tr>
<td>Person ID:</td>
<td> <span style="color: red;">*</span> </td>
<td><asp:TextBox ID="TxtPersonID" MaxLength="50" CssClass="{required:true, messages:{required:'Person ID is required!'}}" runat="server" /></td>
<td></td>
</tr>