Validate input type="file" field using javascript

Question

I have a form in which the user first select if they want to upload any file. If yes then 3 upload box are displayed to them.

On click of submit there is a JavaScript function which checks for any empty fields. In this function, if the option to upload file is selected, then I am checking if the input type="file" is empty.

The error I am facing is that even after the user select a file for upload, the error message to upload a file is still displayed.

Here is my HTML code:

<!-- 3rd Fieldset STARTS --> <fieldset class="fieldSetSpace"> <legend class="legendText">&nbsp; Upload Documents &nbsp;</legend> <span id="yes"><input type="radio" name="rdoUploadDocu" id="rdoUploadDocuYes" tabindex="23" value="yes" onClick="javascript: showUploadDiv();" /></span> &nbsp;Yes I have A Documents To Upload <div id="divUploadDoc" style="display:none;"> <span class="contact_table">Upload Document 1 </span> <input type="file" name="files[]" id="file1" class="txtCoName" /> <span class="contact_table">Upload Document 2</span> <input type="file" name="files[]" id="file2" class="txtCoName" /> <span class="contact_table">Upload Document 3</span> <input type="file" name="files[]" id="file3" class="txtCoName" /> </div> <?php echo $errorResumeUpload; ?> <br /> <span id="no"><input type="radio" name="rdoUploadDocu" id="rdoUploadDocuNo" value="no" tabindex="24" onClick="javascript: hideUploadDiv();" /></span> &nbsp;No I do not have A Documents To Upload <div id="divUploadCheckError" class="divError"></div> </fieldset> <!-- 3rd Fieldset ENDS -->

Here is my JS function:

else if (document.getElementById('rdoUploadDocuYes').checked) { var upload1 = document.getElementById('file1').value; var upload2 = document.getElementById('file2').value; var upload3 = document.getElementById('file3').value; alert( upload1 ); alert( upload2 ); alert( upload3 ); if( ( upload1 == '' ) || ( upload2 == '' ) || ( upload3 == '' ) ) { var objErrDiv = document.getElementById('divUploadCheckError'); objErrDiv.innerHTML= 'Please upload at least one documents '; objErrDiv.style.padding='4px 4px'; objErrDiv.style.visibility='visible'; objErrDiv.style.margin='10px 0px 2px 0px'; return false; } else { return false; } }

Any help will be appreciated.

You're starting with else if the first should be an if condition, is there code above this? — Mitchell Layzell
– Mitchell Layzell, Commented Aug 26, 2013 at 6:47

Praveen · Accepted Answer · 2013-08-26 06:50:10Z

I think you're missing to reset the innerHTML of objErrDiv div.

else if (document.getElementById('rdoUploadDocuYes').checked) { var upload1 = document.getElementById('file1').value; var upload2 = document.getElementById('file2').value; var upload3 = document.getElementById('file3').value; var objErrDiv = document.getElementById('divUploadCheckError'); alert( upload1 ); alert( upload2 ); alert( upload3 ); if( upload1 == '' ) { objErrDiv.innerHTML= 'Please upload at least one documents '; objErrDiv.style.padding='4px 4px'; objErrDiv.style.visibility='visible'; objErrDiv.style.margin='10px 0px 2px 0px'; return false; } else { objErrDiv.innerHTML=""; // Try adding this return false; } }

no that did nt work...... I hv edited my code above.... can u plz take a look again
what I am trying to do is to check if all upload files are empty. if any one upload file is filled then the form is should submit....
@mkb Here is a simple fiddle jsfiddle.net/pvPtw check this. It is simple to understand.
My code was not working on jsfiddle. So I have upload a test file on one of my web server. Here is the link ivanbayross.com/test.. Could you please take a look and let me know the issue... Thank You...

Collectives™ on Stack Overflow

Validate input type="file" field using javascript

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related