focus not working

**kaeli** · Jul 23 '05, 08:00 PM

Re: focus not working

In article <clrke.632$kS3. 63@newssvr21.ne ws.prodigy.com> ,
tscheiderich@ft solutions.com enlightened us with...[color=blue]
> I have a date validation function that I want to stay at the object I am
> validating if there is a Validation error, but it always goes to the next
> object.[/color]

Define "next object".
How did the blur get fired? The tab key? The enter key? Clicking outside the
box? It may make a difference for event bubbling. It may even differ between
browsers -- you'd have to test it.
[color=blue]
>
> The Javascript:
>
> function ValidateForm(me ){
> var dt=me
> if (isDate(dt.valu e)==false){[/color]

Don't overcomplicate things.
if (! isDate(dt.value ))
[color=blue]
>
> Why doesn't it stay there?[/color]

Probably an event bubbling issue.
The dt.focus() is firing, but THEN the focus event for the other control is
getting fired. Issues like this can be a pain to trace. Try setting up alerts
in your controls so you can see when the events get fired or writing the
event trace to a div on the page to look at. You may need to cancel the focus
event or some such.
Such PITA issues have caused me to abandon checking validation in the onblur
or onchange of form fields, personally.

--
--
~kaeli~
A plateau is a high form of flattery.

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

**tshad** · Jul 23 '05, 08:01 PM

Re: focus not working

"kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
news:MPG.1cfcf5 d6da90cb8998a5f 1@nntp.lucent.c om...[color=blue]
> In article <clrke.632$kS3. 63@newssvr21.ne ws.prodigy.com> ,
> tscheiderich@ft solutions.com enlightened us with...[color=green]
>> I have a date validation function that I want to stay at the object I am
>> validating if there is a Validation error, but it always goes to the next
>> object.[/color]
>
> Define "next object".
> How did the blur get fired? The tab key? The enter key? Clicking outside
> the
> box? It may make a difference for event bubbling. It may even differ
> between
> browsers -- you'd have to test it.[/color]

The next object is another text box. I am hitting the tab key to go to the
next object. The next objects are:

From:<input name="AbsentFro m1" type="text" size="10" id="AbsentFrom1 "
onBlur="return ValidateForm(th is)" /> 
to:<input name="AbsentTo1 " type="text" size="10" id="AbsentTo1" /> 
Reason:<input name="AbsentRea son1" type="text" size="30" id="AbsentReaso n1"
/>

[color=blue]
>[color=green]
>>
>> The Javascript:
>>
>> function ValidateForm(me ){
>> var dt=me
>> if (isDate(dt.valu e)==false){[/color]
>
> Don't overcomplicate things.
> if (! isDate(dt.value ))[/color]

You're right. That is better.[color=blue]
>[color=green]
>>
>> Why doesn't it stay there?[/color]
>
> Probably an event bubbling issue.
> The dt.focus() is firing, but THEN the focus event for the other control
> is
> getting fired. Issues like this can be a pain to trace. Try setting up
> alerts
> in your controls so you can see when the events get fired or writing the
> event trace to a div on the page to look at. You may need to cancel the
> focus
> event or some such.[/color]

Not sure how to set up traces in the controls. I was using alerts to see if
it was getting to the dt.focus (which it is).
[color=blue]
> Such PITA issues have caused me to abandon checking validation in the
> onblur
> or onchange of form fields, personally.[/color]

Where would you put the validation then?

Thanks,

Tom[color=blue]
>
> --
> --
> ~kaeli~
> A plateau is a high form of flattery.
> http://www.ipwebdesign.net/wildAtHeart
> http://www.ipwebdesign.net/kaelisSpace
>[/color]

**kaeli** · Jul 23 '05, 08:01 PM

Re: focus not working

In article <VHHke.799$kS3. 393@newssvr21.n ews.prodigy.com >,
tscheiderich@ft solutions.com enlightened us with...[color=blue]
>
> The next object is another text box. I am hitting the tab key[/color]

Okay. That means the focus event will be called for the control that was next
in tabindex (or default if not specified).
Check what happens when you hit enter (form submit) and when you click in the
document outside the control (no focus called).
I bet you will see at least two different behaviors between the three.
[color=blue]
>
> Not sure how to set up traces in the controls. I was using alerts to see if
> it was getting to the dt.focus (which it is).[/color]

Yes, it would, but if the focus event gets called for the next control, it
will still fire. AFTER blur and after the function sets the focus. You'd need
to cancel the focus event for the next control.
To check, just pop
onFocus="alert( focused)"
into the control that is getting the focus instead of the one you wanted
focused. I bet that alert fires after, not before. So, the dt.focus IS
working just fine, but then the focus event is fired for the next control
(from pressing tab key).
See, the order of events would be like
1. user enters value
2. onChange (as well as keyup, keypress, etc) fires for controlA (for each
keypress)
3. user hits tab to go to controlB
4. onBlur fires for controlA
5. controlB gets focus from tab press
6. controlB onFocus fires
[color=blue]
>[color=green]
> > Such PITA issues have caused me to abandon checking validation in the
> > onblur
> > or onchange of form fields, personally.[/color]
>
> Where would you put the validation then?[/color]

I personally put it in form onSubmit. I ran into an issue with onchange not
firing properly when the user hits the enter key for form submit, too. So I
was having to duplicate code for onsubmit and onchange. Now it's just all in
one spot. And it works in more browsers without putzing around with the
different ways browsers bubble events.

<form onSubmit="retur n validateMe(this );">

The validateMe function checks all the form fields as required and returns
false if any fail (stopping form submission by returning false) and true if
they all pass.
Here's a small exerpt from a page of mine as an example. Note that isBlank is
a custom function that returns true or false. You can see that, as well as
other validation functions I find useful, here:

http://www.ipwebdesign.net/kaelisSpace/useful_jsValidation.html

<form name="f1" method="get" action="events_ growth_viewNow. jsp"
onSubmit="retur n validateMe(this )">

<script type="text/javascript">
function validateMe(frm)
{
if (isBlank(frm.or dernumInternal) && isBlank(frm.eve ntId)
{
alert("You must enter either an event ID or an order number.")
frm.eventId.foc us();
return false;
}
return true;
}

--
--
~kaeli~
Do not taunt Happy Fun Ball!

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

**tshad** · Jul 23 '05, 08:01 PM

Re: focus not working

"kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
news:MPG.1cfd23 a3dc95e8ea98a5f 4@nntp.lucent.c om...[color=blue]
> In article <VHHke.799$kS3. 393@newssvr21.n ews.prodigy.com >,
> tscheiderich@ft solutions.com enlightened us with...[color=green]
>>
>> The next object is another text box. I am hitting the tab key[/color]
>
> Okay. That means the focus event will be called for the control that was
> next
> in tabindex (or default if not specified).
> Check what happens when you hit enter (form submit) and when you click in
> the
> document outside the control (no focus called).
> I bet you will see at least two different behaviors between the three.
>[color=green]
>>
>> Not sure how to set up traces in the controls. I was using alerts to see
>> if
>> it was getting to the dt.focus (which it is).[/color]
>
> Yes, it would, but if the focus event gets called for the next control, it
> will still fire. AFTER blur and after the function sets the focus. You'd
> need
> to cancel the focus event for the next control.
> To check, just pop
> onFocus="alert( focused)"
> into the control that is getting the focus instead of the one you wanted
> focused. I bet that alert fires after, not before. So, the dt.focus IS
> working just fine, but then the focus event is fired for the next control
> (from pressing tab key).
> See, the order of events would be like
> 1. user enters value
> 2. onChange (as well as keyup, keypress, etc) fires for controlA (for each
> keypress)
> 3. user hits tab to go to controlB
> 4. onBlur fires for controlA
> 5. controlB gets focus from tab press
> 6. controlB onFocus fires
>[/color]

That makes sense.
[color=blue][color=green]
>>[color=darkred]
>> > Such PITA issues have caused me to abandon checking validation in the
>> > onblur
>> > or onchange of form fields, personally.[/color]
>>
>> Where would you put the validation then?[/color]
>
> I personally put it in form onSubmit. I ran into an issue with onchange
> not
> firing properly when the user hits the enter key for form submit, too. So
> I
> was having to duplicate code for onsubmit and onchange. Now it's just all
> in
> one spot. And it works in more browsers without putzing around with the
> different ways browsers bubble events.
>
> <form onSubmit="retur n validateMe(this );">
>[/color]

That would be fine, but the user may be entering 12 dates and I don't want
him to find out that all the dates are in the wrong format after he has
entered them all. I want to allow him to see it right when it happens.
Otherwise, I would just let ASP.Net handle the validation.

Thanks,

Tom
[color=blue]
> The validateMe function checks all the form fields as required and returns
> false if any fail (stopping form submission by returning false) and true
> if
> they all pass.
> Here's a small exerpt from a page of mine as an example. Note that isBlank
> is
> a custom function that returns true or false. You can see that, as well as
> other validation functions I find useful, here:
> http://www.ipwebdesign.net/kaelisSpa...alidation.html
>
> <form name="f1" method="get" action="events_ growth_viewNow. jsp"
> onSubmit="retur n validateMe(this )">
>
> <script type="text/javascript">
> function validateMe(frm)
> {
> if (isBlank(frm.or dernumInternal) && isBlank(frm.eve ntId)
> {
> alert("You must enter either an event ID or an order number.")
> frm.eventId.foc us();
> return false;
> }
> return true;
> }
>
>
> --
> --
> ~kaeli~
> Do not taunt Happy Fun Ball!
> http://www.ipwebdesign.net/wildAtHeart
> http://www.ipwebdesign.net/kaelisSpace
>[/color]

**kaeli** · Jul 23 '05, 08:19 PM

Re: focus not working

In article <usNke.1220$rY6 .31@newssvr13.n ews.prodigy.com >,
tscheiderich@ft solutions.com enlightened us with...[color=blue]
>
> That would be fine, but the user may be entering 12 dates and I don't want
> him to find out that all the dates are in the wrong format after he has
> entered them all. I want to allow him to see it right when it happens.
> Otherwise, I would just let ASP.Net handle the validation.
>[/color]

A few ideas here.
ASP.NET has a control for choosing dates. Instead of relying on the user to
enter a date in a certain format, you may want to use the date chooser
control instead.

http://www.macromedia.com/devnet/mx/dreamweaver/articles/aspnet_calendar_

03.html

I don't get to use .NET for my application that involves a lot of dates, so I
specify to the users what the format is right next to the date control. If
they can't read, they learn the hard way. ;)

All that said, the focus/blur thing is a common and well-known issue. There
are various workarounds. Here's a simple one I made that has been tested in
Firefox and MSIE. It needs fleshed out and you may want to allow another
control to be focused even if the current one is invalid.
What it currently does is checks the validity of a control and won't allow
focus off until it is valid.
Play with it and see if you like it. Change what you need until you get the
desired behavior.
And don't forget to put in comments and error checking and the like. This is
just a little something I was playing with, so it is nowhere near production
quality code. Have fun.

<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var err = false;
var currentControl = null;

function controlFocused( control)
{
if (err == false)
{
currentControl = control;
}
if (currentControl != null) currentControl. focus();
}

function checkIt(e)
{
if (e.length==0 || e.length==10)
{
err = false;
return true;
}
else
{
alert("Please enter a valid value for " + e.name + ".");
err = true;
return false;
}
}
</script>
</head>

<body>
<form name="form1" method="get" action="">
<p>Date 1
<input name="date1" type="text" id="date1" onFocus="contro lFocused
(this);" onChange="check It(this)">
</p>
<p>Date 2
<input name="date2" type="text" id="date2" onFocus="contro lFocused
(this);" onChange="check It(this)">
</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>
</body>
</html>

--
--
~kaeli~
If a turtle doesn't have a shell, is he homeless or naked?

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

focus not working

focus not working

Comment

Comment

Comment

Comment

Comment