Welcome to WebmasterWorld Guest from 184.73.112.180

Forum Moderators: open

submit button submits despite return false;

   
9:55 pm on Jul 18, 2007 (gmt 0)

5+ Year Member



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>

9:57 pm on Jul 18, 2007 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<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).

10:09 pm on Jul 18, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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".
10:13 pm on Jul 18, 2007 (gmt 0)

5+ Year Member



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]

10:16 pm on Jul 18, 2007 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

Very good advice.

10:57 pm on Jul 18, 2007 (gmt 0)

5+ Year Member



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?

10:25 am on Jul 19, 2007 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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. :-)
10:33 am on Jul 19, 2007 (gmt 0)

5+ Year Member



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)

4:21 pm on Jul 19, 2007 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month