focus() problem 1

PatrickIRL · Oct 22, 2003

Hi,

I have an HTML page with some fields that require validation. What I am doing is on the onblur() event I'm validating the field. If there is invalid data I want the focus to stay on that field. This is working fine in IE but not Netscape or Mozilla. As a test I produced the following, can anybody shed some light on the subject?

<html>
<head>
<script language="javascript">
function validateDobDay(){
if(document.getElementById("dobDD&quot

.value < 10){
alert("Please enter a value greater than 10.&quot

;
document.getElementById("dobDD&quot

.value="";
document.getElementById("dobDD&quot

.focus();
return false;
}
}
</script>
</head>
<body>
<input type="text" id="dobDD" size="2" onblur="validateDobDay()">
<input type="text" id="dobMM" size="2">
</body>
</html>

Thanx in advance ....

bnymk · Oct 22, 2003

try using onChange() instead of onblur()

Lrnmore · Oct 22, 2003

I started using "this.form" cuts down
on all that "document." notation.

It passes the form as the object automatically.

And the regular expression /^\d{2}$/ checks that
the user entered 2 digits.

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html><head><title>TEST Page</title>
<script language=&quot;JavaScript&quot;>
  function validateDobDay(frm){
    if(!frm.dobDD.value.match(/^\d{2}$/) ||
	     frm.dobDD.value > 31){
      alert(&quot;Please enter 2 Digits e.g. 05 O.K.&quot;);
      frm.dobDD.value=&quot;&quot;;
      frm.dobDD.focus();
      return false;    }
   return true;  }
</script></head><body>
<form>
Day<br>
<input type=&quot;text&quot; id=&quot;dobDD&quot; size=&quot;2&quot; onblur=&quot;validateDobDay(this.form)&quot;>
<br>Month<br>
<input type=&quot;text&quot; id=&quot;dobMM&quot; size=&quot;2&quot;><br>
</form></body></html>

2b||!2b

PatrickIRL · Oct 22, 2003

Nope, tried them all. The focus still goes onto the next input, any ideas ???

Lrnmore · Oct 22, 2003

I am thinking to make it work like you want
you'll have to use a different event method
like the button in this form.

You can incorporate the form submission into
the validation script.

This reference may be helpful:

http://www.webreference.com/content/jssource/chap16.html

Tested this page in NN7 and IE6

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html><head><title>TEST Page</title>
<script language=&quot;JavaScript&quot;>
  function validateDobDay(frm){
    if(!frm.dobDD.value.match(/^\d{2}$/) ||
         frm.dobDD.value > 31){
      alert(&quot;Please enter 2 Digits&quot;);
      frm.dobDD.value=&quot;&quot;;
      frm.dobDD.focus();
      return false;    }
   alert(&quot;Form Submitted Here&quot;);
   //document.test.submit();
   return true;  }
</script></head><body>
<form name=&quot;test&quot;>
Day<br>
<input type=&quot;text&quot; id=&quot;dobDD&quot; size=&quot;2&quot;>
<br>Month<br>
<input type=&quot;text&quot; id=&quot;dobMM&quot; size=&quot;2&quot;><br>
<input type=&quot;button&quot; value=&quot;Submit&quot; onClick=&quot;validateDobDay(this.form);&quot;>
</form></body></html>

2b||!2b

clarkin · Oct 22, 2003

This is interesting because I had this exact same problem yesterday

In IE you can stop some events by returning false in their event handler (eg onsubmit="return false;&quot

.
Returning false with onblur doesn't work, but you CAN focus on the element again, which has pretty much the same effect (onblur="this.focus();&quot

.
However mozilla's whole event system is totally different, and basically the above doesn't work. I would welcome a solution..

Here's a partial work around: delay the focus() by a millisecond:

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd&quot;>[/URL]
<html>
<head>
<title>testbed</title>
<style type=&quot;text/css&quot;>
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function check(txt) {
	if (txt.value == &quot;&quot;) {
		alert(&quot;please enter a value&quot;);
		setTimeout(&quot;document.getElementById('text1').focus()&quot;, 1);
	}
}
</script>
</head>
<body>
<form>
<input type=&quot;text&quot; id=&quot;text1&quot; size=&quot;30&quot; onblur=&quot;return check(this);&quot; />
<input type=&quot;text&quot; id=&quot;text2&quot; size=&quot;30&quot; onblur=&quot;return false;&quot; />
</form>
</body>
</html>

Still I couldn't find a decent page explaining mozilla's event system (specifically how to cancel one).

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

Lrnmore · Oct 22, 2003

clarkin,

I didn't even notice that the page I posted was using
"id=" instead of "name=" for the form fields I just cut
and paste from the original post. I would and should
have changed that.

What if any is the advantage of using id for a form field
instead of name??

mark,

2b||!2b

clarkin · Oct 22, 2003

Not really much difference: I just used id= so I could refer to them using the DOM with document.getElementById().

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

PatrickIRL · Oct 23, 2003

Hi all, many thanks for your replies and suggestions. The only reason I have to do this is because I had originally used VBScript for validation (I was told by the client that ALL his people use IE). However :-( , turns out that ONE of his client uses AOL/Netscape exclusively. I want the same functionality if possible using JavaScript, I'll keep trying, again thanks for the input, much appreciated.

Patrick

PatrickIRL · Oct 23, 2003

Just a note, searched mozilla.org, found nothing that would help me to fix this problem. :-( There are plenty of examples using onblur() and focus(), yet no issues. Curious, am I doing something WAY wrong ???????

Patrick

bigoldbulldog · Oct 23, 2003

Try out killing the event by inserting the following in your block before the ... .focus();

window.event.returnValue=false;
window.event.keyCode=0;

If this is wrong I would continue on this idea - STOP THE EVENT.

Cheers,
ND [smile]

bigoldbulldog@hotmail.com

theboyhope · Oct 23, 2003

Bug 53579:

http://bugzilla.mozilla.org/show_bug.cgi?id=53579

PatrickIRL · Oct 23, 2003

Thanx theboyhope, thought it was just me, ah well

clarkin, using the setTimeout method, let you know what happens,

PatrickIRL · Oct 23, 2003

YES, YES, YES, OH YES !!!!!!!!!!!!

Thanks clarkin, setTimeOut works, take a star, my treat.

Patrick

clarkin · Oct 23, 2003

Sounds like you should do all your client-side scripting in javascript - It works just fine in IE too.

[spin2]

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

focus() problem 1

PatrickIRL

Programmer

bnymk

Programmer

Lrnmore

Technical User

PatrickIRL

Programmer

Lrnmore

Technical User

clarkin

Programmer

Lrnmore

Technical User

clarkin

Programmer

PatrickIRL

Programmer

PatrickIRL

Programmer

bigoldbulldog

Programmer

theboyhope

IS-IT--Management

PatrickIRL

Programmer

PatrickIRL

Programmer

clarkin

Programmer

Similar threads

Part and Inventory Search

Sponsor