Ok, I was sure that was all you needed. The actual answer is a little funny (well, so much for
my sense of humor) and requires some explanation.
To begin with, the
onchange event may not be the best way to do field edits. Are you sure you want field-by-field feedback, or would it be better to edit the whole form in the
onclick event for your submit button?
But maybe you want field-by-field. Ok.
The
onchange event has the characteristic of being
cancelable. The event fires when the form field
changes. A change is defined as basically "the user has altered the value and is about to commit the change." Committing the change means doing something like tabbing to the next field.
So the user types "17322q234" in the SSN field, presses the tab key, and immediately
onchange fires.
In your event handler you check the value, become dissatisfied with it, clear the value, and set the focus() back to the SSN field.
But you are
already in the SSN field !!!
THEN you exit your event handler without canceling
onchange and IE goes ahead and advances focus to the next field.
Ok, you see why I'm laughing? Duh! I knew this, but it was buried someplace in my memory I guess. Sorry I didn't tell you earlier.
Since it is pointless to setfocus() someplace we're already at, we rewrite your event handler so that it is a Function, and return the value
to cancel the change instead of goofing around with focus().
So my test case looks like:
Code:
<html>
<head>
<script language="VBScript">
Function usrSSN_onchange()
If Not IsNumeric(Me.value) Then
MsgBox "You have entered letter characters in the SSN rather than numbers. Please redo.",,"......Enter numeric characters only"
Me.value = ""
usrSSN_onchange = False
End If
End Function
Sub window_onload()
mainF.usrName.focus
End Sub
</script>
</head>
<body>
<form name="mainF">
Name <input type="text" name="usrName" tabindex="1"><br>
SSN <input type="text" name="usrSSN" tabindex="2"><br>
Height <input type="input" name="usrHeight" tabindex="3">
</form>
</body>
</html>
And it works just fine... or
does it???
Well, if a user loads this page, types in "Tom" for his name, tabs to the SSN field and types "a" for his SSN, and then tabs again...
Your message pops up, and after OKing the notice the SSN field is cleared, and the cursor is left at SSN for another try. Looks good.
But if he then tabs again without typing a new SSN value, the cursor blithely advances to the Height field in this example!
Well, duh! Nothing
changed!
So basically using onchange, while seeming cool on the surface, sorta sucks for field value validation. This is also one reason I tend to validate just prior to permitting a submit to proceed.
But if you really want field-by-field checks, then go for it - there's nothing wrong with it in principal.
I suggest you replace your
onchange event handler with an
onblur handler instead however, such as:
Code:
Sub usrSSN_onblur()
If Not IsNumeric(Me.value) Then
MsgBox "You have entered letter characters in the SSN rather than numbers. Please redo.",,"......Enter numeric characters only"
Me.value = ""
Me.focus
End If
End Sub
Note that
onblur cannot be canceled. But by definition it is fired after the item (field) loses focus, so we can use our good buddy the focus() method this time. And your validation logic will be invoked every time the user enters and then leaves the field.
Crisis averted, world saved.
By the way, did you notice I replaced the bulky
references with the VBScript
instead? Cool, isn't it?
Oh, and you could get away with just
if you wanted to as well. The reason just saying something like
doesn't work is that most types of HTML items, when they occur in a <form>, are placed into the form's namespace rather than the document's namespace. Thus in script they need to be qualified by the form name
except in script blocks that
also occur within the same <form>.
Hopefully this was useful and your sense of humor is intact. Good luck!
