Categories:
Help

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Partners
This is a

Using the onBlur event handler

We will now introduce two event handlers, ones especially for forms, that are used commonly when doing form validations.

Additional Event handlers for forms
onblur:   Executes JavaScript whenever a user moves with the mouse the focus away from an element within a form. In other words, whenever a person first clicks an element, and then clicks anywhere outside of it.
onsubmit:   Executes JavaScript whenever someone clicks the "submit" button.

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

Feedback please:

<script>
function emailcheck(){
var string1=document.example.email.value
if (string1.indexOf("@")==-1){
.alert("Please input a valid email address!")
.document.example.email.focus()
.}
}
</script>

<form name="example"><input type="text" size="20" name="email" onblur="emailcheck()">
<strong>Feedback please:</strong>
<textarea name="S1" rows="2" cols="20"></textarea>
<input type="submit" name="B1" value="Submit">
</form>

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 that element.
  • 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 is:
    "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 this:
    alert("Please input a valid email address!")
    document.example.email.focus()
    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 corrected!

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.