ASP.NET隐藏RequiredFieldValidator上的面板

Question

I have a simple web page that has few asp panels. I make a search of record from database and these panels are made visible on the page.
but when, say, i enter an invalid value in the textbox to check whether the RequiredFieldValidator is working fine or not, the Error message is displayed. But the Panels that are already visible on the form are not hidden.
I understand, that because the form is not making a post back, therefore these panels are not set to invisible. Can something please guide me as to how to hide these panels if the requiredfieldvalitor throws an error?

Answer 1

You would either have to disable ClientValidation to allow a postback, or use custom JavaScript. If a visible postback is an issue, you can easily use UpdatePanels .

Answer 2

Attach dependent elements by data-dependentClass of validator and place this script below form closing tag

 <form id="form1" runat="server">
      <asp:TextBox ID="TextBox1" runat="server" />
      <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
           Text="*" data-dependentClass="addressValidation"  />
      <br />
      <asp:TextBox ID="TextBox2" runat="server" />
      <br />
      <asp:Button runat="server" Text="Click Me" />
      <hr />
      <asp:Panel runat="server" ID="Panel1" CssClass="addressValidation">
           Rendered at:
           <%= DateTime.Now.ToLongTimeString() %>
      </asp:Panel>
 </form>
 <script type="text/javascript">
      var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;
      ValidatorUpdateDisplay = function (val) {
           originalValidatorUpdateDisplay.call(null, val);

           var dependentClass = val.getAttribute("data-dependentClass");
           if (dependentClass) {
                elements = document.getElementsByClassName(dependentClass);
                for (var i = 0; i < elements.length; i++) {
                     elements[i].style.display = val.isvalid === false ? "none" : "";
                }
           }
      }
 </script>