How to prevent form submission on Enter

Question

I have a form with " required" in the <input> lines. The problem is that if I terminate a field value with Enter I get an annoying "Please fill out this field" for the next field, because it obviously wants to submit the form on Enter. Ideally I'd like to map keycode 13 to 9, since the behavior I want occurs if you enter Tab after a field value, i.e., just move to the next field.

I've tried

$("form#checkout_form").keypress(function(e) { if(e.keyCode == 13) { e.keyCode = 9; } });

but that doesn't work. Does anyone have any other ideas?

Thanks

This behaviour is standard in any form anywhere, users that didn't learn they can use Tab to navigate fields will use the mouse instead, because liking it or not they eventually learned pressing Enter is not the way to do this. What I see is you creating an exception to the principles of user interfaces in general. You can do that if you insist, but is that really what you want? — Havenard
– Havenard, Commented May 1, 2014 at 2:30
Yes, I think it is what I want to do. This product is especially for non-technical users, who will want to to the most intuitive thing ,which is to hit Enter after filling out a field. My goal is to present these users with the fewest number of surprises, not to educate them. — Steve
– Steve, Commented May 1, 2014 at 2:49

Iqbal Fauzi · Accepted Answer · 2014-05-01 02:24:42Z

Set e.keyCode to 9 will not move the focus to the next input, Try :

$("form input").keydown(function(e) { if(e.keyCode == 13){ e.preventDefault(); // cancel default Enter key behaviour $(this).next('input').focus(); } });

Web_Designer · Accepted Answer · 2014-05-01 02:20:26Z

0

Put this inside your event handler:

e.preventDefault();

answered May 1, 2014 at 2:20

Web_Designer

75.1k93 gold badges210 silver badges268 bronze badges

Comments

Havenard · Accepted Answer · 2014-05-01 02:24:00Z

Bind a function to the onsubmit event of your form to perform necessary validations. You can halt the form submission by returning false in this function.

Another way to prevent Enter from attempting to submit the form is removing the <input type="submit"> and replacing it with any other link that will call a form.submit() when pressed. It can even be a <input type="button"> to mimic the classic submit button. A form with no <input type="submit"> won't be submitted by pressing Enter.

Collectives™ on Stack Overflow

How to prevent form submission on Enter

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related