homepage Welcome to WebmasterWorld Guest from 23.20.63.27
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
submit button submits despite return false;
horseatingweeds




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

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




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

<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




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

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




msg:3398606
 10:13 pm on Jul 18, 2007 (gmt 0)

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




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

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

Very good advice.

horseatingweeds




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

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




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

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




msg:3398882
 10:33 am on Jul 19, 2007 (gmt 0)

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved