針對文本框和圖像的Jquery驗證無法正常工作

Question

我正在使用asp.net。我正在使用圖像。我的代碼示例如下：

{ <div style="float: left; width: 30%; padding-left: 3px;"> 
       <asp:Label ID="ImageTitleLabel" runat="server" Text="Image Title"></asp:Label> 
      </div> 
      <div style="float: left; width: 60%;"> 
       <asp:TextBox ID="ImageTitleTextBox" runat="server" MaxLength="50" CssClass="smallTxtBox"></asp:TextBox> 
      </div> 
      <div class="formlinebreak"> 
      </div> 
      <div style="float: left; width: 30%; padding-left: 3px;"> 
       <asp:Label ID="ImageDescriptionLabel" runat="server" Text="Image Description"></asp:Label> 
      </div> 
      <div style="float: left; width: 60%;"> 
       <asp:TextBox ID="ImageDescriptionTextBox" runat="server" MaxLength="256" TextMode="MultiLine" 
        CssClass="multilineTxtBox"></asp:TextBox> 
      </div> 
      <div class="formlinebreak"> 
      </div> 
      <div id="PhotoTransport" style="float: left; width: 29.5%; padding-left: 5px;"> 
       <img id="imgEventPhoto" width="120" height="90" class="IntGalHLNoBrdr" alt='Sorry! No image found.' 
        src='' runat="server" /> 
      </div> 
      <%--divPhotoUpload starts--%> 
      <div id="divPhotoUpload" style="float: left; width: 65%;"> 
       <input id="fupEventPhoto" type="file" size="35" name="PhotoUploadedToUpload" class="imguploader validate[required]" 
        onchange="return validatePhotographToUploadPhoto();" /> 

       <img id="PhotoLoading" alt="Loading..." src="<%=ResolveClientUrl("~/Images/loading.gif")%>" 
        style="display: none;" /> 
      </div> 
      <%-- divPhotoUpload end--%> 
      <%--divPhotoThumb starts--%> 
      <div id="divPhotoThumb" style="font-size: 10px; float: left;"> 
       <asp:Button ID="btnClearPhoto" runat="server" Text="Clear Image" CssClass="CCButtonEnabled" 
        OnClick="btnClearPhoto_Click" /> 
      </div> 
      <%-- divPhotoThumb end--%> 
      <div class="formlinebreak"> 
      </div> 
      <div id="ButtonFields" style="float:right;"> 
       <asp:Button ID="CancelButton" runat="server" CssClass="CCButtonEnabled" Text="Cancel" 
        OnClick="CancelButton_Click" UseSubmitBehavior="false" /> 
        <asp:Button ID="SaveButton" runat="server" CssClass="CCButtonEnabled" Text="Save" OnClick="SaveButton_Click" /> 
        <asp:Button ID="EditButton" runat="server" CssClass="CCButtonEnabled" Text=" Edit" OnClick="EditButton_Click" /> 
         <asp:Button ID="AddButton" runat="server" CssClass="CCButtonEnabled" Text=" Add" OnClick="AddButton_Click" /> 
      </div>} 

我試圖驗證在保存按鈕的單擊事件的圖片名稱。我試圖在瀏覽選項和清除圖像按鈕之間切換。我正在使用jquery在它們之間切換。在其他形式，它工作正常，但在這個頁面中，同一段代碼不起作用。切換我有這樣的代碼：

{function ShowThumbPhoto() { 

     // $('[id$=imgEventPhoto]').attr('src','<%=ResolveClientUrl("~/jj.jpg") %>'); 
     $('[id$=imgEventPhoto]').attr('src', '<%=ResolveClientUrl("~/Handlers/DisplayCropedThumbImage.ashx?")%>TY=P&cropImageW=' + $('[id$=cropImageW]').val() + '&cropImageH=' + $('[id$=cropImageH]').val() + '&cropImageX1=' + $('[id$=cropImageX1]').val() + ' &cropImageY1=' + $('[id$=cropImageY1]').val() + ' &T=' + new Date().getTime().toString()); 
     $('#divPhotoThumb').show(); 
     $('[#divPhotoUpload').hide(); 


    }; 
    function HideThumbPhoto() {    
     $('[id$=divPhotoThumb]').hide(); 
     $('[id$=divPhotoUpload]').show(); 
     $('[id$=btnClearPhoto]').hide(); 

    };} 

現在我試圖驗證在保存按鈕的圖片標題中的文件。準備這樣的jQuery：

{ $(document).ready(function() { 

     $("#aspnetForm").validate({ //Imp #aspnetForm is the ID of the <form> in site.Master 
      rules: { 
       '<%=ImageTitleTextBox.UniqueID %>': { 
        required: true 
       }, 
       PhotoUploadedToUpload: { 
        required: true 
       } 
      }, 
      messages: { 
       '<%=ImageTitleTextBox.UniqueID %>': { 
        required: "<span style='color:#F87126;padding-left:10px; font-size:smaller;'>Image title is required.</span>" 
       }, 
       PhotoUploadedToUpload: { 
        required: "<span style='color:#F87126;margin-left:60px;font-size:smaller;width:50px;'>Please select an image.</span>" 
       } 
      } 

     });} 

我試圖解決，因爲最近兩天驗證，但仍未能解決，我呼籲從服務器端的clearImageButton_Click的HideThumbPhoto（）（）這樣的：

{ protected void btnCancelPhoto_Click(object sender, EventArgs e) 
    { 
     Session["ucPhotoUploaderUploadedImagePhoto"] = null; 
     this.RegisterJS("tabClick($('a[href=#tabInstancePhotoGallery]').parent());"); 
     CheckImage(); 
    } 

    private void CheckImage() 
    { 
     if (Session["ucPhotoUploaderUploadedImagePhoto"] != null) 
     { 
      this.RegisterJS("ShowThumbPhoto();"); 

     } 
     else 
     { 
      this.RegisterJS("HideThumbPhoto();"); 

     } 
    } 


     } 

我的問題是：

1. 要驗證的保存按鈕點擊標題，但在這裏驗證在ClearImage點擊正在執行。

2. 我想通過ShowThumbPhoto和hideThumbPhoto fn在瀏覽和清晰圖像之間切換。

你的幫助對我來說意義重大。我會很感激你的幫助，請

謝謝

有關於

Iswar

Answer 1

使用 <%=ImageTitleTextBox.ClientID %> ，而不是 <%=ImageTitleTextBox.UniqueID %>

在JS功能

而且： -

{function ShowThumbPhoto() { 

     // $('[id$=imgEventPhoto]').attr('src','<%=ResolveClientUrl("~/jj.jpg") %>'); 
     $('[id$=imgEventPhoto]').attr('src', '<%=ResolveClientUrl("~/Handlers/DisplayCropedThumbImage.ashx?")%>TY=P&cropImageW=' + $('[id$=cropImageW]').val() + '&cropImageH=' + $('[id$=cropImageH]').val() + '&cropImageX1=' + $('[id$=cropImageX1]').val() + ' &cropImageY1=' + $('[id$=cropImageY1]').val() + ' &T=' + new Date().getTime().toString()); 
     $('#divPhotoThumb').show(); 
     //$('[#divPhotoUpload').hide(); 
     $('#divPhotoUpload').hide(); 


    }; 
    function HideThumbPhoto() {    
     $('[id$=divPhotoThumb]').hide(); 
     $('[id$=divPhotoUpload]').show(); 
     $('[id$=btnClearPhoto]').hide(); 

    };}