如何在ASP.NET內容表單中使用JQuery驗證

我有一個包含幾個文本框的asp.net內容表單。我需要爲這些文本框實現JQuery必需的字段驗證。在下面的代碼中，我無法弄清楚如何使用JQuery來完成它。即使花了一些時間搜索一下，我感到困惑。感謝您的幫助提前如何在ASP.NET內容表單中使用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>

來源

2012-03-12 WinW

你意識到人們http://pastebin.com網站都得到處都是，沒有必要複製/粘貼在這裏你的整個代碼，只是錯誤的部分。 – balexandre 2012-03-12 07:57:14

您是否找到下面詳細解釋它的鏈接？ http://www.zachhunter.com/2010/06/jquery-validation-with-asp-net/ – PraveenVenu 2012-03-12 08:00:39

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>

來源

2012-03-12 08:06:34

感謝您的幫助，我現在有一些想法，需要嘗試一下。 IN「$（」＃MasterPageForm1「）。bind（」invalid-form.validate「，」'Invalid -form'是那裏的內容形式的名稱？ – WinW 2012-03-12 08:18:11

如何在ASP.NET內容表單中使用JQuery驗證

回答

相關問題