|
At this point you should place a form object (from the forms palette in GoLive) in a page and then add a submit button and a two text fields. Name the form "myForm", the first text field "myField" and the second field "myField2". (No quotes).
First we need a trigger that will transfer the form data and start our script. We use the onSubmit event in the form tag like this:
<form action="(EmptyReference!)" method="get" name="myForm" onSubmit="myValidation(this)">
"this" is a magical word that needs some explanation,. It refers to the tag in which it is located, so "this" in the form tag means the entire form, while "this" in a text field tag means that text field only.
When the user now hit the submit button two things will happen:
- The onSubmit event fires.
- The event handler we added sends an instance of the form object to our script.
So what is an "instance of the form object"? Well it's like a copy of everything in the form, but one aspect is different from a "normal copy", any changes we make to the instance will also be reflected in the "original" form!
The next step is to write a function that receives the form object instance. We'll start with this:
<script type="text/javascript">
<!--
function myValidation(theForm){
alert(theForm.myField.value)
}
// -->
</script>
If you have read the other tutorials there is nothing new in this script other than that it's receiving the form object instance instead of a parameter. When the submit button is clicked an alert box containing the text in the "myField" text field will display on screen.
If you test the code in your page you will find that the form is trying to submit after you clicked the alert box. If we want to write a validation script we should be able to stop the submission!
Stopping the form from submitting is very simple, we just need to make two small changes. First change the onSubmit handler in the form tags so that the form tag looks like this:
<form action="(EmptyReference!)" method="get" name="myForm" onSubmit="return myValidation(this)">
Then change the script to:
<script type="text/javascript">
<!--
function myValidation(theForm){
alert(theForm.myField.value)
return false
}
// -->
</script>
What we done is this.
- We have instructed the browser to look for the value returned by our script.
- If that value is true the form can be submitted, but not if the value is false.
All validation scripts work like that, a true value will make the form submit and a false value will stop the submission process.
If you want to make some experiments why not use what you learned now and in earlier tutorials and write a script that checks if two text fields contain the same text. If they do the form should be submitted, if the content differs the process should be stopped. (This is basically how you validate password input.)
The next form tutorial will show you how forms are validated in real life situations.
Back to tutorial index <<
|
