RequiredFieldValidator Working Oddly in Update Panel

Question

I've got an update panel with a textbox and a requiredfieldvalidator and a couple of buttons.

On pageload, you see a label and a button. On button press, the textbox and validator display (along with the other button).

The basic change in display works fine. However, my validator (which is set to be dynamic) displays its error message, even if the textbox is populated. Provided that the textbox is populated, pressing the submit button does actually work, but there's obviously something not quite right with my code.

  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <%
        If DoNameUpdate = "" then
        %>
          <div class="formrow">
            <div class="standardlabel">Name: </div>
            <div class="fakeformfield"><%=TheName%></div>
            <div class="buttonclass"><asp:ImageButton ID="ImageButton1" ImageUrl="/images/changebutton.gif" alt="Change" CssClass="formsub" runat="server" /></div>
          </div>
        <%
        Else
        %>
        <div class="formrow">
          <asp:Label AssociatedControlID="client_name" CssClass="standardlabel" runat="server" Text="Name "></asp:Label><span class="mandatory">*</span>
          <asp:TextBox ID="client_name" runat="server" MaxLength="255" CssClass="textboxborder"></asp:TextBox><BR>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="client_name" Display="Dynamic" CssClass="error" ErrorMessage="Required" InitialValue=""></asp:RequiredFieldValidator>
          <div class="buttonclass"><asp:ImageButton ID="ImageButton2" ImageUrl="/images/savebutton.gif" alt="Save Changes" CssClass="formsub" runat="server" /></div>
        </div>
        <%
        End if
        %>
      </ContentTemplate>
  </asp:UpdatePanel>

And the codebehind...

Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
    Dim myReader As IDataReader = CType(SqlDataSource1.Select(DataSourceSelectArguments.Empty), IDataReader)
    If myReader.read then
      client_name.text = myReader("ClientName")
    End if
    myReader.close
  DoNameUpdate = "val"
End Sub
Protected Sub ImageButton2_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton2.Click
  SqlDataSource2a.update()
  Dim myReader As IDataReader = CType(SqlDataSource1.Select(DataSourceSelectArguments.Empty), IDataReader)
  If myReader.read then
      TheName = myReader("ClientName")
  End if
  myReader.close
  DoNameUpdate = ""
End Sub

Any suggestions?

Answer 1

Validate validators inside updatepanel on custom event.
You can try to invoke validation on 'blur' event with jquery (or other event 'click', 'change' ,'keypress', 'keyup' etc.). For example:

 function TextBoxValidate() {
    $('input:[type="text"]:[id*="client_name"]').each(function () { $(this).on('blur', function () { var txtId = this.id; $('span').each(function () { if (this.controltovalidate == txtId) ValidatorValidate(this); }); }); }); 
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(TextBoxValidate);

Just add this code sample in your javascript file and include jquery library