ASP.net C# enabling and disabling required field validator through javascript

Question

I am using an input type "file" control in asp.net C# web page. The scenario is, when I try to browse any file using this file upload control, a textbox becomes visible and the required field validator gets enabled that controls this textbox. Also there is an input type button that reset the file in the control and text in the textbox to null. I also want to disable this required field validator on reset button click, but I am unable to do so.

I could have used aspx button control to reset the data and disable the required field validator, but this is causing loss of other information on the page. That is why I tried doing this using javascript.

I tried using a code from internet for the same. Here is my design and code:

<input ID="FileUploadDownload" type="file" name="file" runat="server" class="cssfileupload" />
<input type="button" value="Reset" id="btnClearAttachment" onclick="clearFileUploadDownload()" class="resetMe"/>

<asp:TextBox ID="TextBoxDownloadText" runat="server" placeholder="Type Download File Text" ontextchanged="TextBoxDownloadText_TextChanged" AutoPostBack="true"></asp:TextBox>    
<asp:RequiredFieldValidator ID="RequiredFieldValidatorTextBoxDownloadText" ValidationGroup="A" ControlToValidate="TextBoxDownloadText" runat="server" CssClass="validator" ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>

The onchange event of fileupload control is as follows:

<script type="text/javascript">
function checkFile(e) {

    var file_list = e.target.files;

    for (var i = 0, file; file = file_list[i]; i++) {            
        var sFileName = file.name;
        var sFileExtension = sFileName.split('.')[sFileName.split('.').length - 1].toLowerCase();
        var iFileSize = file.size;
        var iConvert = (file.size / 10485760).toFixed(2);


        if ((sFileExtension === "pdf" || sFileExtension === "png" || sFileExtension === "jpg" || sFileExtension === "gif")) 
        {      

            //...............Enable validator..................
            var validatorObject = document.getElementById('<%=RequiredFieldValidatorTextBoxDownloadText.ClientID%>');
            validatorObject.enabled = true;
            validatorObject.isvalid = true;
            ValidatorUpdateDisplay(validatorObject);
            document.getElementById("TextBoxDownloadText").style.border = '1px solid red';
        }

    }
}

function clearFileUploadDownload() {

            $("#FileUploadDownload").val("");
            $('#<%=TextBoxDownloadText.ClientID%>').val("");

            //...............disable validator..................
            var validatorObject = document.getElementById('<%=RequiredFieldValidatorTextBoxDownloadText.ClientID%>');
            validatorObject.enabled = false;
            validatorObject.isvalid = false;
            ValidatorUpdateDisplay(validatorObject);
            document.getElementById("TextBoxDownloadText").style.border = '1px solid green';
}
</script>

In the page load event, I have disabled the required field validator:

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        { 
            RequiredFieldValidatorTextBoxDownloadText.Enabled = false;
        }
 }

Onchange event of file upload control enables required validator but on click event of reset button, the validator is not getting disbaled.

Kindly help. Thank you in advance!

Answer 1

Try

var valName = document.getElementById("<%=RequiredFieldValidatorTextBoxDownloadText.ClientID%>");
        ValidatorEnable(valName, true);

to enable and

var valName = document.getElementById("<%=RequiredFieldValidatorTextBoxDownloadText.ClientID%>");
        ValidatorEnable(valName, false);

to disable