467,892 Members | 1,877 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,892 developers. It's quick & easy.

focus not working

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.

The javascript:

function ValidateForm(me){
var dt=me
if (isDate(dt.value)==false){
dt.focus()
return false
}
return true
}

The html:

<input name="AbsentFrom1" type="text" size="10" id="AbsentFrom1"
onBlur="return ValidateForm(this)" />

I do get the error box in my other function (isDate) and it is doing the
dt.focus().

Why doesn't it stay there?

Thanks,

Tom
Jul 23 '05 #1
  • viewed: 10784
Share:
5 Replies
In article <cl**************@newssvr21.news.prodigy.com>,
ts**********@ftsolutions.com enlightened us with...
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.
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.

The javascript:

function ValidateForm(me){
var dt=me
if (isDate(dt.value)==false){
Don't overcomplicate things.
if (! isDate(dt.value))

Why doesn't it stay there?


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

Jul 23 '05 #2
"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...
In article <cl**************@newssvr21.news.prodigy.com>,
ts**********@ftsolutions.com enlightened us with...
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.
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.


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="AbsentFrom1" type="text" size="10" id="AbsentFrom1"
onBlur="return ValidateForm(this)" />&nbsp;
to:<input name="AbsentTo1" type="text" size="10" id="AbsentTo1" />&nbsp;
Reason:<input name="AbsentReason1" type="text" size="30" id="AbsentReason1"
/>


The javascript:

function ValidateForm(me){
var dt=me
if (isDate(dt.value)==false){
Don't overcomplicate things.
if (! isDate(dt.value))


You're right. That is better.

Why doesn't it stay there?
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.


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).
Such PITA issues have caused me to abandon checking validation in the
onblur
or onchange of form fields, personally.
Where would you put the validation then?

Thanks,

Tom
--
--
~kaeli~
A plateau is a high form of flattery.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #3
In article <VH***************@newssvr21.news.prodigy.com>,
ts**********@ftsolutions.com enlightened us with...

The next object is another text box. I am hitting the tab key
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.

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).
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
Such PITA issues have caused me to abandon checking validation in the
onblur
or onchange of form fields, personally.


Where would you put the validation then?


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="return 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/kaelisSpa...alidation.html

<form name="f1" method="get" action="events_growth_viewNow.jsp"
onSubmit="return validateMe(this)">

<script type="text/javascript">
function validateMe(frm)
{
if (isBlank(frm.ordernumInternal) && isBlank(frm.eventId)
{
alert("You must enter either an event ID or an order number.")
frm.eventId.focus();
return false;
}
return true;
}
--
--
~kaeli~
Do not taunt Happy Fun Ball!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #4

"kaeli" <ti******@NOSPAM.comcast.net> wrote in message
news:MP************************@nntp.lucent.com...
In article <VH***************@newssvr21.news.prodigy.com>,
ts**********@ftsolutions.com enlightened us with...

The next object is another text box. I am hitting the tab key
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.

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).


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


That makes sense.
> Such PITA issues have caused me to abandon checking validation in the
> onblur
> or onchange of form fields, personally.


Where would you put the validation then?


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="return validateMe(this);">


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
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="return validateMe(this)">

<script type="text/javascript">
function validateMe(frm)
{
if (isBlank(frm.ordernumInternal) && isBlank(frm.eventId)
{
alert("You must enter either an event ID or an order number.")
frm.eventId.focus();
return false;
}
return true;
}
--
--
~kaeli~
Do not taunt Happy Fun Ball!
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 23 '05 #5
In article <us***************@newssvr13.news.prodigy.com>,
ts**********@ftsolutions.com enlightened us with...

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.


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/...pnet_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>Untitled 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="controlFocused
(this);" onChange="checkIt(this)">
</p>
<p>Date 2
<input name="date2" type="text" id="date2" onFocus="controlFocused
(this);" onChange="checkIt(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

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by JCO | last post: by
7 posts views Thread by Dave Booker | last post: by
8 posts views Thread by Brad Isaacs | last post: by
2 posts views Thread by J055 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.