Using the onBlur event handler
We will now introduce two event handlers,
ones especially for forms, that are used commonly when doing form
Additional Event handlers for forms
away from an element within a form. In other words, whenever a person
first clicks an element, and then clicks anywhere outside of it.
Ok, you need clarification. Onblur
is used when you want to check each element (ie: text, textarea boxes )
individually, and ask the user to correct the input before moving on to the
next box. The other event, onsubmit, validates the form at the end, as
the user presses the submit button. I prefer the later, but its up to you.
Ok, lets see exactly how onblur works. We're going to write
a script that checks the first text box , and asks for correction as soon as
text has been entered and the user moves the focus onto another box
(assuming the person has entered "wrong" data.) Here we go:
Enter your email address:
(Try entering something without the "@", and you'll get a alert telling you
to re-enter the data as you proceed to the Feedback box.)
.alert("Please input a valid email address!")
<form name="example"><input type="text" size="20" name="email" onblur="emailcheck()">
<textarea name="S1" rows="2" cols="20"></textarea>
<input type="submit" name="B1" value="Submit">
Ok, lets have a look at what's inside the <script> tags.
- We defined a function called emailcheck() that'll be
called by the onblur event hander when the user clicks elsewhere away from
- We copied the value of the box into "string1". Why?
Simply for easier reference, you don't have to do this.
- Here comes the part that requires explaining. What
"string1.indexOf("@")==-1" in the code? Well, first of all, you need to understand that
all data entered into a text, text area box are strings. For ex, "Hello there"
or "12343" are strings, 12343 is a number. Now, here is the surprise:
string itself is also an object. If that's the case, that means it has
methods/properties. One of the methods, you might have guessed it, is
indexOf("the char you are looking for"). Using this method,
we can search every character within a string and look for what we want.
If it finds it will return the position of the char within the string. If
it doesn't, it will return -1. Therefore, "string1.indexOf("@")==-1"
basically means: "if @ is not in the string, do
alert("Please input a valid email
What's the thing in red? Well, focus() is a method
of the text box, which basically forces the cursor to be at the specified
text box, which is like the user clicking inside the text box with the
mouse.Why do we need this? If we didn't, the only thing the user that
entered bad data will see is the message "Please input a valid email
address!" but THEN still allowed to move on onto the second box and submit
the form. That's merely a slap on the face, and will not truly screen out
those that are determined to not follow the rules. However, if we use the
focus() method, the focus will be set back to the box containing errors,
and will only allow users to proceed after it has been corrected.
- This is not a fool proof validation...in fact, you
could enter "@sprynet" and get away with it. However, that can always be
If you've been playing around with the onblur event
handler, even with simply the above example, you might have noticed that it
can be very annoying at times; the better way is to simply defer the
checking until a user presses the submit button, and check for errors all in
one scoop. That's where the onsubmit handler comes in.