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

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

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.

If you want to prevent a form being submitted from within onsubmit,
simply have your validation function return false.

Paul R wrote:[color=blue]
> 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.[/color]

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! :-)

--
Fred

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.

Peloux wrote:[color=blue]
> 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.[/color]

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

Peloux wrote:[color=blue]
> Hi,
>
> I have written some htc in order to validate data in a form.[/color]

"htc"? Or JavaScript (JS)? Sorry, haven't come across "htc"
before.
[color=blue]
> 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>[/color]

use:

<script type="text/javascript">

the "type" attribute is required.
[color=blue]
> function touche_EnterKeyPress(){
> if (window.event.keyCode==13){
> maForm.submit()[/color]

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();
[color=blue]
> }
> }
> </SCRIPT>
> <BODY onkeydown="javascript:EnterKeyPress();">[/color]

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

<BODY onkeydown="EnterKeyPress();">

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

[color=blue]
> -----------
> The problem is that the field of the form are not validated
> because the onblur event seems to be fire after the submit
> event ![/color]

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! :-)

--
Fred

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

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

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

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

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

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about