jquery - 如何在 ASP.NET 内容表单中使用 JQuery 验证

Question

我有一个 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">
    &nbsp;
     <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">
                            &nbsp;
                        </td>
                        <td style="width: 70%" align="left">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 30%; height: 22px;" align="right" class="lgt">
                            <span runat="server"  style="color: #ff0033">*</span>Objective Code:&nbsp;&nbsp;
                        </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:&nbsp;&nbsp;
                        </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:&nbsp;&nbsp;
                        </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:&nbsp;&nbsp;
                        </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:&nbsp;&nbsp;
                        </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:&nbsp;&nbsp;
                        </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>
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 30%" align="right" class="lgt">
                            &nbsp;
                        </td>
                        <td style="width: 70%" align="left" class="txtwt">
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 30%" align="right" class="lgt">
                            &nbsp;</td>
                        <td style="width: 70%" align="left" class="txtwt">
                            &nbsp;</td>
                    </tr>
                    <%-- <tr>
                        <td style="width: 30%" align="right" class="lgt">
                            <span style="color: #ff0033">*</span> Select City:&nbsp;&nbsp;
                        </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:&nbsp;&nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td style="width: 70%" align="left" class="txtwt">
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 30%" align="right" class="lgt">
                            &nbsp;</td>
                        <td style="width: 70%" align="left" class="txtwt">
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td style="width: 30%" align="right">
                            &nbsp;
                        </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>

Answer 1

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>&nbsp;<span style="color: red;">*</span>&nbsp;</td>
    <td><asp:TextBox ID="TxtPersonID" MaxLength="50" CssClass="{required:true, messages:{required:'Person ID is required!'}}" runat="server" /></td>
    <td></td>
</tr>