validating <input type='file'

validate input file

[horseatingweeds]

I'm trying to build a validator for a for containing a file upload. Everything is ok except for when I insert bad information, submit, then add proper information. At this point the for will not re-submit.

I am preventing both fields from being filled (use of a picture OR text), ensuring that one is filled, and preventing files other than .gif and .jpg. I'll add more but am having trouble already with the re-submit after correction.

I've searched for an answer to this all over....

Here is the code:

function submit_check()
{

var form = document.form1;
var returnValue = false;

if (form.title.value.length == 0 && form.fileImgLogo.value.length == 0)
{
var logo_title = document.getElementById('logo_title');
logo_title.style.color = 'Red';
form.title.focus();
}
else if (form.title.value.length > 0 && form.fileImgLogo.value.length > 0)
{
var error_enterLogo = document.getElementById('error_enterLogo');
error_enterLogo.style.position = 'static';
form.title.focus();
}
else if (form.fileImgLogo!= '')
{
var file = form.fileImgLogo.value;
var mime = file.substr(file.lastIndexOf('.'));
if (mime!= '.gif' && mime!= '.jpg')
{
var error_wrongFile = document.getElementById('error_wrongFile');
error_wrongFile.style.position = 'static';
form.fileImgLogo.focus();
}
}
else
{
returnValue = true;
}
return returnValue;

<form name='form1' id='form1' enctype='multipart/form-data' onsubmit='return submit_check()'>
<div id='leftColumn'>

<fieldset>
<legend id='logo_title'><span>*</span> Title of Your Listing:</legend>
Text Title:<br />
<input type='text' name='title' size='30' maxlength='70' value='' /><br />
&nbsp &nbsp - OR -<br />
Image Logo<br />
<input type='file' name='fileImgLogo' size='30' />
<p id='error_enterLogo'>You must choose either a Text Logo or an Image Logo.</p>
<p id='error_wrongFile'>Your Image Logo file must be either a .gif or .jpg file.
</fieldset>

</div>
</form>

[Arno_Adams]

Hi horseatingweeds,

function submit_check(o) {
var title = o.title;
var file = o.fileImgLogo;
if((title.value.length == 0) && (file.value.length == 0)) { //Both fields are empty.
return false;
}
else if((title.value.length > 0) && (file.value.length > 0)) { //Both fields are filled.
return false;
}
else {
if((file.value.length > 0)) {
if(file.value.substring(file.value.length-3) == 'gif' ¦¦ file.value.substring(file.value.length-3) == 'jpg') {
return true;
}
else { //Wrong filetype!
return false;
}
}
else {
return true;
}
}
}

and the form-tag looks like this:

<form name='form1' id='form1' enctype='multipart/form-data' onsubmit='return submit_check(this);'>

HTH, AA

[edited by: Arno_Adams at 5:38 pm (utc) on July 19, 2007]

[horseatingweeds]

Is there some kind of problem with having more than one file input in a form? My script will only check the first one.

Here is the code:

function submit_check(o)
{

var form = o;
var returnValue = false;
var emailRegexp = RegExp('^[A-Za-z0-9._-]+[@]([A-Za-z0-9-]+[.])+(com¦net¦edu¦us¦gov)$', 'i');
var file;
var mime;

var error_emptyImgTitle = document.getElementById('error_emptyImgTitle');
error_emptyImgTitle.style.position = 'absolute';
var error_wrongFile = document.getElementById('error_wrongFile');
error_wrongFile.style.position = 'absolute';
var error_emptyLogo = document.getElementById('error_emptyLogo');
error_emptyLogo.style.position = 'absolute';
var error_emptyTitle = document.getElementById('error_emptyTitle');
error_emptyTitle.style.position = 'absolute';
var error_email = document.getElementById('error_email');
error_email.style.position = 'absolute';
var error_reenter = document.getElementById('error_reenter');
error_reenter.style.position = 'absolute';
var error_missmash = document.getElementById('error_missmash');
error_missmash.style.position = 'absolute';
var error_wrongFileImg = document.getElementById('error_wrongFileImg');
error_wrongFileImg.style.position = 'absolute';

// Check Logo Image
if (form.fileImgLogo.value.length > 0)
{
file = form.fileImgLogo.value;
mime = file.substr(file.lastIndexOf('.'));
if (mime!= '.gif' && mime!= '.jpg')
{
error_wrongFile.style.position = 'static';
form.fileImgLogo.focus();
}
else if (form.logoTitle.value.length == 0)
{
error_emptyImgTitle.style.position = 'static';
form.logoTitle.focus();
}
else
{
returnValue = true;
}
}
// Check Text Title
else if (form.logoTitle.value.length == 0)
{
error_emptyLogo.style.position = 'static';
form.logoTitle.focus();
}
// Check Page Title
else if (form.title.value.length == 0)
{
error_emptyTitle.style.position = 'static';
form.title.focus();
}
// Check Email input
else if ((emailRegexp.test(form.email.value))!= true)
{
error_email.style.position = 'static';
form.email.focus();
}
// Check Re-enter of email
else if ((emailRegexp.test(form.reEnterEmail.value))!= true)
{
error_reenter.style.position = 'static';
form.reEnterEmail.focus();
}
else if (form.email.value!= form.reEnterEmail.value)
{
error_missmash.style.position = 'static';
form.email.focus();
}
// Check Image upload files

else if (form.fileImg1.value.length > 0)
{
alert('Check');
}

else
{

returnValue = true;
}

return returnValue;
}

<form name='form1' id='form1' enctype='multipart/form-data' onsubmit='return submit_check(this)'>
<div id='leftColumn'>

<fieldset>
<legend id='logo_title'>Logo:</legend>
Optional Image File<br />
<input type='file' name='fileImgLogo' size='30' /><br />
<span>*</span>Logo Title<br />
<input type='text' name='logoTitle' size='30' maxlength='70' value='' />
<p class='stay'>If you choose to leave out a Logo Image, the Logo Title will serve as a Logo.</p>
<p id='error_wrongFile'>Your Image Logo file must be either a .gif or .jpg file.</p>
<p id='error_emptyImgTitle'>You must provide a Title for your Image. This title will only appear when visitors hover their pointer over the image.</p>
<p id='error_emptyLogo'>You must provide a Title to serve as the Logo for your page.</p>
</fieldset>

<fieldset>
<legend id='logo_title'><span>*</span> Title of Your Listing:</legend>
Text Title:<br />
<input type='text' name='title' size='30' maxlength='70' value='' />
<p id='error_emptyTitle'>You must provide a Titile for you page.</p>
</fieldset>

<fieldset>
<legend>Contact Information</legend>
<span>*</span> E-mail Address:<br />
<input type='text' name='email' size='40' maxlength='60' value='' /><br />
<p id='error_email'>Please enter a valid E-mail address</p>
<span>*</span> Re-enter E-mail Address:<br />
<input type='text' name='reEnterEmail' size='40' maxlength='60' value='' /><br />
<p id='error_reenter'>Please re-enter a valid E-mail address</p>
<p id='error_missmash'>E-mail addresses do not match. Please re-enter.</p>
Phone Number:<br />
<input type='text' name='phone' size='20' maxlength='50' value='' /><br />
</fieldset>

<fieldset>
<legend><span>*</span> Location</legend>
<input type="hidden" value="countrySelect" name="cs_config_country_field" id="cs_config_country_field">
<input type="hidden" value="stateSelect" name="cs_config_state_field" id="cs_config_state_field">

<!-- The id of the the fields holding the default values. If more than one, seperate with spaces -->
<input type="hidden" value="countryDefault" name="cs_config_country_default" id="cs_config_country_default">
<input type="hidden" value="stateDefault" name="cs_config_state_default" id="cs_config_state_default">

<!-- The actual default values -->
<input type="hidden" value="US" name="countryDefault" id="countryDefault">
<input type="hidden" value="" name="stateDefault" id="stateDefault">
<SCRIPT type="text/javascript" SRC="scripts/country_state.js"></SCRIPT>

Country:<br />
<select id='countrySelect' name='country' onchange='updateState(this.id)'>
</select>
State:<br />
<select id='stateSelect' name='state'>
</select>
<SCRIPT type="text/javascript">initCountry(); </SCRIPT>
</fieldset>

<fieldset>
<legend>Pictures</legend>
<input type='file' name='fileImg1' size='30' /><br /><br />
<input type='file' name='fileImg2' size='30' /><br /><br />
<input type='file' name='fileImg3' size='30' />
<p id='error_wrongFileImg'>Your Image files must be either a .gif or .jpg file.</p>

</fieldset>

[Arno_Adams]

Hi,

Multiple file inputs is no problem. The problem is that your script only checks one.

HTH, AA

[horseatingweeds]

But it does, here:

else if (form.fileImg1.value.length > 0)
{
alert('Check');
}

[Arno_Adams]

And where do you check the contents
of 'fileImg2' and 'fileImg3'?

AA

[horseatingweeds]

Hang on Arno_Adams, let me figure fileImg1 first.;-)

Funny though, I just plopped this in:

else if (form.fileImg2.value.length > 0)
{
alert('Img2');
}
else if (form.fileImg3.value.length > 0)
{
alert('Img3');
}

just to see.

Still, only the first file field is checked.

[WesleyC]

Shouldn't you do if statements instead of else if in that situation?

[horseatingweeds]

Good ideal WeslyC. I've given it a try.

[horseatingweeds]

You were right about the use of if statments WesleyC. I think I am getting this under control now. Good thinking!

[Arno_Adams]

Hi,

And maybe you want to update the pattern for validating e-mailaddresses. It'doesn't check all the other top-level domains.

HTH, AA