Using Enter Key to submit a form with HTC and onblur event

Peloux · Feb 9, 2005

Hi,

I have written some htc in order to validate data in a form. most of
htc are attached on 'onblur' event.

Now, we would like to use the Enter Key to sublit form, so we use the
following code :
-----------
<SCRIPT>
function touche_EnterKeyPress(){
if (window.event.keyCode==13){
maForm.submit()
}
}
</SCRIPT>
<BODY onkeydown="javascript:EnterKeyPress();">
-----------
The problem is that the field of the form are not validated because
the onblur event seems to be fire after the submit event !

If you had an idear, you're welcome, I just want to use Enter Key to
submit a form

Regards
PELOUX Olivier

Fred Oz · Feb 9, 2005

Paul said:
I wouldn't validate a form in onblur; onsubmit is the correct place, and
assuming you have an INPUT type="submit" element somewhere, you don't
need to intercept the enter key: the form will do it for you.

I'll second that. Trapping a user in a field that will not let
them quit until they get it right can cause frustration. The
field should be correct when the form is submitted, not
necessarily at every moment before that.

Also, some browsers do not lose focus on the current input field
when submit is clicked - onblur never fires, the form just
submits.

Users get used to how their browser works. If it normally does
not submit when enter is pressed, they expect it not to. A
textarea should accept "enter" key presses without submitting.
If users start to learn that their browser will submit the form
whenever they press enter, they become nervous about putting new
lines into textareas.

Having a form that sometimes submits when enter is pressed but
not other times can be really confusing for some users.

If you *really* want to validate onblur, then write the error to
the page (design it with a space say immediately adjacent to the
input for error messages when required) and make the messages
very helpful (and friendly). That way, the user gets feedback
on the validation but doesn't get an annoying alert.

If users don't want to use mouseclicks to submit the form (and
many data entry operators hate using a mouse), consider using
some other key or key combination (say alt + enter) to submit
the form from the keyboard and put the submit immediately
after the last input field in the tabindex so that once the last
field is completed, tab then enter will submit the form
(dependent on validation of course...).

Hope that all helps!

Peloux · Feb 10, 2005

In fact, I don't want my form to be validated by onblur event, but on
only some fields of my form. For exemple, my form contains some
input=text which represent date format, so where this field lose focus
the HTC validate that the field contains date.

Fred Oz · Feb 10, 2005

Peloux said:
In fact, I don't want my form to be validated by onblur event, but on
only some fields of my form. For exemple, my form contains some
input=text which represent date format, so where this field lose focus
the HTC validate that the field contains date.

OK, so let's go back to your original post:

Hi,

I have written some htc in order to validate data in a form.

"htc"? Or JavaScript (JS)? Sorry, haven't come across "htc"
before.

most of htc are attached on 'onblur' event.

Now, we would like to use the Enter Key to sublit form, so we
use the following code :

use:

<script type="text/javascript">

the "type" attribute is required.

function touche_EnterKeyPress(){
if (window.event.keyCode==13){
maForm.submit()

You may be able to address your form this way in IE (presuming
it has either a name or id of "maForm"), but not in most other
browsers. Assuming the id or name is "maForm" you should use:

document.forms['maForm'].submit();

}
}
</SCRIPT>
<BODY onkeydown="javascript:EnterKeyPress();">

No need for the "javascript" pseudo-protocol, just use:

<BODY onkeydown="EnterKeyPress();">

You are calling "EnterKeyPress" but your function is called
"touche_EnterKeyPress".

As Paul suggested, validate on submit. That way the form is
always validated (provided JS is enabled of course).
Alternatively, (or maybe in addition) add the validation to
touche_EnterKeyPress().

function touche_EnterKeyPress(){
if (window.event.keyCode==13){

/* call validation functions */

if (passedValidation == true) {
maForm.submit();
} else {
return false;
}
}
}

You can always do validation on blur *and* submit if you want
(provided useability is given due consideration)

Have fun!

HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
Anomaly: onblur handling AND advice on validation	1	Jan 29, 2008
Cross Browser "Form Auto Submit on Enter"	2	Feb 8, 2007
Issue with passing fetched data to POST form. How can I?	0	Jul 23, 2023
Problem with android and scrolling with <input textarea	5	May 18, 2022
browser compatibility: Javascript: onblur: Firefox vs. InternetExplorer	2	Jan 15, 2008
ENTER key clearing form	2	Dec 17, 2007
File Upload - Change key code for ENTER key on Browse Button	3	May 10, 2007

Using Enter Key to submit a form with HTC and onblur event

Peloux

Fred Oz

Peloux

Fred Oz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads