Validation Of text box through jquery

Question

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

 { <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:

 {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:

 {  $(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:

 { 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:

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

2. I want to toggle between Browse and Clear Image through ShowThumbPhoto and hideThumbPhoto fn.

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

Thank You

with Regard

Iswar