Ajax RequiredFieldValidator popping when display of a textbox is changed using JavaScript

Question

Issue:
Issue is due to "ValidatorCalloutExtender" which fires even when the RequiredFieldValidator is disabled using javascript ValidatorEnable(val, enabled) Method.

Possible Duplicate:
How not to trigger RequiredFieldValidator on hidden field (TextBox)

Please Refer this Question First.

Remove empty space when visible property is set to false using JavaScript

In the above Question my empty space problem is solved but Another problem started to bug me.

I used the .style.display = "block"; and .style.display = "none"; properties to a textbox which has Ajax RequiredFieldValidator. When the Style is block, the TextBox is Displayed and when it is Empty The RequiredFieldValidator is popping. Until not this is Fine.

But when the TextBox Display Style is set to "none",the RequiredFieldValidator is popping on the top left corner of the page and not allowing postback.

Can you Help me??

Here is the JavaScript Code

<script type="text/javascript">
function OtherProof(val) {
    // or use this both works
    //var ProofType = document.getElementById("ddl_IDProof");
    //var SelectedProofType = ProofType.options[ProofType.selectedIndex].value;
    if (val == "0") {
        document.getElementById("lbl_OtherProof").style.display = "block";
        document.getElementById("tb_OtherProof").style.display = "block";
    }
    else {
        document.getElementById("lbl_OtherProof").style.display = "none";
        document.getElementById("tb_OtherProof").style.display = "none";
    }
}
</script>

Here is the aspx Code

//Dropdown list whoch on selected i make the textbox Display and Disappear
<asp:DropDownList ID="ddl_IDProof" runat="server"
                 onchange="OtherProof(this.options[this.selectedIndex].value);"
                  Width="155px">
                    <asp:ListItem>Driving License</asp:ListItem>
                    <asp:ListItem >Voter Card</asp:ListItem>
                    <asp:ListItem>Pan Card</asp:ListItem>
                    <asp:ListItem Value="0">Other Proof</asp:ListItem>
                </asp:DropDownList>

//Here are the label and Textbox which i make Display and Disappear
 <td><asp:Label ID="lbl_OtherProof" runat="server" Text="Other Proof" Font-Size="13px" style="display:none"></asp:Label></td>
                <td></td>
                <td>
                <asp:TextBox ID="tb_OtherProof" runat="server" Width="150px" MaxLength="30" style="display:none"></asp:TextBox>
                           <asp:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server" TargetControlID="tb_OtherProof" FilterType="UppercaseLetters,LowercaseLetters,Custom" ValidChars=" "></asp:FilteredTextBoxExtender>
                           <asp:RequiredFieldValidator ID="Req_OtherProof" runat="server" ErrorMessage="Proof Name is Mandatory" ControlToValidate="tb_OtherProof" Display="None"></asp:RequiredFieldValidator>
                    <asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender7" runat="server" Enabled="True" TargetControlID="Req_OtherProof" 
                     CssClass="customCalloutStyle">
                    </asp:ValidatorCalloutExtender></td>

Answer 1

Try using ValidatorEnable(val, enable)

Takes a client-validator and a Boolean value. Enables or disables a client validator. Being disabled will stop it from evaluating and it will always appear valid.

   <script type="text/javascript">
  function disableValidation() {
   var val = document.getElementById('Req_OtherProof');
   ValidatorEnable(val, false);
   if (document.getElementById("ValidatorCalloutExtender7_popupTable") != null) {
      document.getElementById("ValidatorCalloutExtender7_popupTable").style.display = "none";
   }
  }

    function OtherProof(val) {
    // or use this both works
    //var ProofType = document.getElementById("ddl_IDProof");
    //var SelectedProofType = ProofType.options[ProofType.selectedIndex].value;
    if (val == "0") {
        document.getElementById("lbl_OtherProof").style.display = "block";
        document.getElementById("tb_OtherProof").style.display = "block";
    }
    else {
        document.getElementById("lbl_OtherProof").style.display = "none";
        document.getElementById("tb_OtherProof").style.display = "none";
        disableValidation();
    }
 }
    </script>