如何使javascript与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?

我想在我的表单上添加验证。我在表单字段中使用AJAX控件。当我删除更新面板和AJAX控件时，我的验证开始工作，但是当将两者保持在一起时，我的验证不起作用。我怎么能让他们一起工作？

<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.

当我删除ajax扩展程序和更新面板时。我的文本框得到验证，并在使用UpdatePanel时。我没有调用我创建的javascript函数。

2 个解决方案

#1

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

UpdatePanel完全替换更新时更新面板的内容。这意味着您订阅的那些事件不再被订阅，因为该更新面板中有新元素。完整答案在这里

In your Page or MasterPage, put the following script

在您的Page或MasterPage中，输入以下脚本

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

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

#2

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:

第一版ajax扩展的一个众所周知的问题是打破验证器。 ScottGu甚至在博客中写了关于在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>

#1