文本框和图像的Jquery验证无法正常工作

I am using asp.net. I am working with image. My code sample is as follows:

我正在使用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>}

I am trying to validate the Image Title in click event of save button. and i am trying to toggle between browse option and clear image button. I am using jquery to toggle between them them. In other form it is working fine but in this page the same piece of code is not working. to toggle I have a code like this:

我试图在保存按钮的单击事件中验证图像标题。我试图在浏览选项和清除图像按钮之间切换。我正在使用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();

    };}

now i am trying to validate the image title in save button in document. ready of jquery like this:

现在我想在文档中的保存按钮中验证图像标题。准备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>"
                }
            }

        });}

I am trying to solve validation since last two days but not been able to solve and i am calling the HideThumbPhoto() from serverside in a clearImageButton_Click() like this:

我试图解决验证，因为最近两天但无法解决，我在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();");

        }
    }


      }

My problem is as follows:

我的问题如下：

Want to validate title in Save button click but here in validate is performing in ClearImage click.

想要在“保存”按钮单击中验证标题，但此处的验证是在ClearImage单击中执行。
I want to toggle between Browse and Clear Image through ShowThumbPhoto and hideThumbPhoto fn.

我想通过ShowThumbPhoto和hideThumbPhoto fn在Browse和Clear Image之间切换。

Your help means a lot to me. I will be grateful for your help please

你的帮助对我意义重大。我将非常感谢你的帮助

Thank You

谢谢

with Regard

就，关于

Iswar

1 个解决方案

#1

Use <%=ImageTitleTextBox.ClientID %> instead of <%=ImageTitleTextBox.UniqueID %>

使用<％= ImageTitleTextBox.ClientID％>代替<％= ImageTitleTextBox.UniqueID％>

Also in the JS functions:-

另外在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();

    };}

#1