onsubmit - enter vs. button

i'm having a problem with my form being sent with invalid information.. i have some text fields which are supposed to be validated before the form can be submitted..

i've got it set up to call the validation methods from the forms onsubmit attribute..

i.e. <form .... onsubmit="return validateform()">

as you can imagine validate form returns false if any of the text fields are badly formatted etc.. it returns true otherwise..

the problem i've run into is that it works perfectly if you click the submit button.. if instead you hit enter from one of the fields on the form and there is incorrect data on it.. it gives the error message popup but than leaves the page with the form.. it doesn't even appear to actually submit the form because none of the server side errors are triggered.. anyone know why the two would be acting differently?

 

i think i've unlocked a big piece of the puzzle..

i think the problem is that there are multiple submit buttons on the page.. the first of which is a cancel button - which sets a js variable so that the form validation does not occur, it simply returns to the previous screen.. so the problem is that the enter button is equivalent to hitting the cancel button as opposed to the update button.. is there any way i can associate which button the enter key corresponds to?

 

Here's a function to capture Enter key presses and ignore them. You could put it on the Cancel button. This is from Danny Goodman's JavaScript and DHTML Cookbook - an great investment.

function blockEnter(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode :
        ((evt.which) ? evt.which : evt.keyCode);
    if (charCode == 13) {
        return false;
    } else {
        return true;
    }
}

Code (markup):

But, why not make your Cancel button just a plain button, or a reset button? Why must it be a Submit button?

<input type="reset">
<input type="button">

Code (markup):

 

well the problem with changing the submit into a button would mean that the cancel button would rely on javascript to work..

although i like your blockenter solution since if the user has javascript on the enter key will not cause it to cancel and if javascript is off the cancel button will still work. -- although there will be the same problem as before for the non-javascript clients, it won't be a problem for the majority of users..

thanks for the help

 

after brief exploration i'm not entirely sure where to add the call to blockEnter..

would it be from the onkeypress attribute of the cancel button?

like

<input type="submit" id="cancel" value="cancel" onkeypress="blockEnter(event);">

??

 

Very close to that. Goodman has used the onkeydown event as opposed to onkeypress.

<input type="submit" name="cancel" size="40" onkeydown="return blockEnter(event)" />

Code (markup):

 

well, that only worked when the cancel button was in focus.

however, i put it in the form tag and it eliminated the enter button from doing anything in any part of the form.. i'm not at all upset with that outcome..

thanks for all the help