How to make javascript work along with Ajax UpdatePanel

I am trying to add validation on my form. I am using AJAX controls in my form fields. When I remove the Update panel and AJAX control, my validation starts working, but when keeping both the things together, my validation is not开发者_运维知识库 working. How could I make them work together?

<script type="text/javascript">

    function Validate() {
        var QuestionTextArea = document.getElementById("ctl00_ctl00_cphBody_midbox_fvInsert_txtQuestion");

        varError = "";
        if (!IsTextBoxEmpty(QuestionTextArea, "\nQuestion Text Area  not be Empty.")) {
            alert(varError);
            document.getElementById("ctl00_ctl00_cphBody_midbox_fvInsert_txtQuestion").focus();
            return false;
        } return true;
    }
</script>



    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>

             <asp:TextBox ID="txtQuestion" runat="server" MaxLength="1000" Columns="50" Rows="5" Style="width: 380px;
             float: none" Text='<%# Bind("Description") %>' TextMode="MultiLine" />
             <AjaxControl:TextBoxWatermarkExtender runat="server" TargetControlID="txtQuestion"
              WatermarkCssClass="water" WatermarkText="Type your Question Here.">
             </AjaxControl:TextBoxWatermarkExtender>


           </ContentTemplate>
        </asp:UpdatePanel>

When I removes ajax extender and Update Panel. My textbox gets validated and when using UpdatePanel. No javascript function created by me is called.

An UpdatePanel completely replaces the contents of the update panel on an update.
This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.
Full answer here

In your Page or MasterPage, put the following script

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

  function EndRequestHandler(sender, args)
  {
    Validate(); 
  }   
</script>

A well known issue with the first version of the ajax extensions was to break validators. ScottGu even blogged about the solution to add the folowing nodes under <system.web><controls><pages> in your web.config:

<tagMapping>
   <add tagType="System.Web.UI.WebControls.CompareValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.CompareValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.CustomValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.CustomValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.RangeValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.RangeValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.RegularExpressionValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.RegularExpressionValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.RequiredFieldValidator" 
        mappedTagType="Sample.Web.UI.Compatibility.RequiredFieldValidator, Validators, Version=1.0.0.0"/>
   <add tagType="System.Web.UI.WebControls.ValidationSummary"
        mappedTagType="Sample.Web.UI.Compatibility.ValidationSummary, Validators, Version=1.0.0.0"/>
</tagMapping>