I have a dropdown list for the which values are coming from DB. There is one option name OTHER, when I select other the textbox appears. For that Textbox I have made a required field validator. Till here it works fine. But when I select any other option, still it gives me validator errors. It should not happen. It should only give me required field error when the user doesn't fills the textbox on select of OTHER option. Please see the code.

Dropdown and Textbox code:-

<asp:DropDownListID="ddlGraduation"runat="server"CssClass="txtfld-popup_drp"></asp:DropDownList>
 <asp:RequiredFieldValidatorCssClass="error_msg"ID="reqGraduation"runat="server"ControlToValidate="ddlGraduation"ErrorMessage="Please select graduation details"InitialValue="--Select--"SetFocusOnError="true"></asp:RequiredFieldValidator>
<asp:TextBoxID="txtOther"runat="server"CssClass="txtfld-popup_p"></asp:TextBox>                                                                                
<asp:RequiredFieldValidatorID="reqOther"runat="server"ControlToValidate="txtOther"ErrorMessage="Please specify your qualification"></asp:RequiredFieldValidator>

JS code for hiding and show the textbox when user select and deselect the OTHER option from dropdown list:-

<scripttype="text/javascript">
    function pageLoad() {
        $('#ctl00_ContentPlaceHolder1_txtOther').hide();
        $('#ctl00_ContentPlaceHolder1_ddlGraduation').change(function () {
            if ($(this).val() === "Other") {
                $('#ctl00_ContentPlaceHolder1_txtOther').show();
            } else {
                $('#ctl00_ContentPlaceHolder1_txtOther').hide();
            }
        });
    };
</script>