'HTML forms validation with a FILE input object
I've been pulling my hair out trying to add a FILE input object to a form on one of my intranet web pages. I saw this article (HTML <input type='file'> File Selection Event) and wondered if this is why even though I have an [onSubmit] handler linked in the tag, as soon as I add the object, it no longer fires the onSubmit event at the form level. Is there a way to tie it all together so I can still validate the other input objects on the same form before going to the handler URL? I need this to work in IE8, and Chrome 20+ mostly. Any help would be greatly appreciated.
Javascript:
function CheckForm(theForm) {
var formName = "form1";
var formx = document.getElementById(formName);
if (formx.appname.value == "") {
alert("Please enter the \"APPLICATION NAME\"...");
formx.appname.focus();
return(false);
}
if (formx.vendor.value == "") {
alert("Please enter the \"VENDOR NAME\"...");
formx.vendor.focus();
return(false);
}
if (formx.srcfile.value == "") {
alert("Please select the "\FILE NAME\"...");
return(false);
}
return (true);
}
HTML:
<form name="form1" id="form1" method="post" language="JavaScript" onSubmit="return CheckForm(this);return false;" action="appform2.asp">
<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="#c0c0c0">
<tr>
<td>Product Name / Version</td>
<td>
<input type="text" id="appname" name="appname" size="50" maxlength="255"/>
</td>
</tr>
<tr>
<td>Vendor Name</td>
<td>
<input type="text" id="vendor" name="vendor" size="50" maxlength="255"/>
</td>
</tr>
<tr>
<td>Source Binaries</td>
<td>
<input type="file" name="srcfile" id="srcfile"/>
</td>
</tr>
</table>
<p>
<input type="reset" name="b2" id="b2" value="Reset"/>
<input type="submit" name="b1" id="b1" value="Submit"/>
</p>
</form>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|