Validate input type="file" field using javascript -
i have form in user first select if want upload file. if yes 3 upload box displayed them.
on click of submit there javascript function checks empty fields. in function, if option upload file selected, checking if input type="file" empty.
the error facing after user select file upload, error message upload file still displayed.
here html code:
<!-- 3rd fieldset starts --> <fieldset class="fieldsetspace"> <legend class="legendtext"> upload documents </legend> <span id="yes"><input type="radio" name="rdouploaddocu" id="rdouploaddocuyes" tabindex="23" value="yes" onclick="javascript: showuploaddiv();" /></span> yes have documents 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> no not have documents upload <div id="divuploadcheckerror" class="diverror"></div> </fieldset> <!-- 3rd fieldset ends -->
here 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 @ least 1 documents '; objerrdiv.style.padding='4px 4px'; objerrdiv.style.visibility='visible'; objerrdiv.style.margin='10px 0px 2px 0px'; return false; } else { return false; } }
any appreciated.
i think you're missing reset 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 @ least 1 documents '; objerrdiv.style.padding='4px 4px'; objerrdiv.style.visibility='visible'; objerrdiv.style.margin='10px 0px 2px 0px'; return false; } else { objerrdiv.innerhtml=""; // try adding return false; } }
Comments
Post a Comment