submit button submits despite return false;

[horseatingweeds]

I’m building a JavaScript form validator for a php page. Regardless of the JavaScript, the form is submitted. I would like the submission to stop and focus on the input that is invalid, allowing the user to fix the problem and re-submit.

Currently, the JavaScript executes, focusing on the faulty input but them immediately submits....

Here is my code:

function submit_check()
{

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

if (form.title.value.length == 0)
{
var logo_title = document.getElementById('logo_title');
logo_title.style.color = 'Red';
form.title.focus();
}
else
{
returnValue = true;
}
return returnValue;
}

<form name='form1' id='form1' >
<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' value='' />
<p id='error_enterLogo'>Something something error message.</p>
</fieldset>

<input type='submit' name='submit' value='Next ->' onclick='submit_check()' />

</div>
</form>

[DrDoc]

<input type='submit' name='submit' value='Next ->' onclick='return submit_check()' />

Your function may return false, but you don't return false to the submit action (which is fired when the button is clicked).

[Bernard Marx]

Also, trigger the validation from the form's onsubmit event. The onclick event of the submit button is no good, since many users submit forms by pressing "Enter".

[horseatingweeds]

Good grief.

Thanks DrDoc. I'm new at this but even I should have seen that....

Do you know why this wouldn't be working in ie? If I leave the inputs blank, submit, than fix them; ie still will not continue to the submit.

[edited by: horseatingweeds at 10:31 pm (utc) on July 18, 2007]

[DrDoc]

The onclick event of the submit button is no good, since many users submit forms by pressing "Enter".

Very good advice.

[horseatingweeds]

Ok, I've put the function in the <form> tag. Here is a problem though. In ie, if I enter faulty information, submit, then fix the information, it will not re-submit. It works ok in FF...

I've tried clearing the fields with element.value = ''; but this wont work with the file input.

Fooling around with it, I have found that in IE it won't let you correct the file input then submit. You can use the brows button, then it will submit. Is this a bug? Anyone know a work around?

[rocknbil]

More like a security feature, I think. If it weren't that way, someone could populate the box with C:\path_to\password\file\or\something\else\sensitive. :-)

[lavazza]

The onclick event of the submit button is no good, since many users submit forms by pressing "Enter".

Very good advice.

OK... why is that good advice? (The three browsers I use all fire an onClick event following an Enter key-press)

[DrDoc]

But there is no guarantee that all browsers/UAs will do that.
If a browser supports JavaScript events, then it should at least support

onsubmit

on the form.

Lowest common denominator.

And, I can tell you for a fact that not all browsers used to fire the

onclick

upon enter key press.