Introduction To Javascript - Part 7: Validating Form Input

Introduction to JavaScript - Part 7
1996 Copyright by Stefan Koch. All rights reserved.

Validating form input
Form input is very important for some Web- pages. The form input is often sent back
to the server again. JavaScript has got the functionality to validate the form input
before sending it to the server. First I want to show you how forms can be validated.
Then we will have a look at the possibilties for sending information back with
JavaScript or T!".
First of all we want to create a simple script. The T!"- page shall contain two te#t-
elements. The user has to write his name into the first and an e-mail address into the
second element. $ou can try this scripts in the online version of my tutorial.
%oncerning the first input element you will receive an error message when not
entering anything. &ny input is seen as valid input. 'f course( this does not prevent
the user from entering any wrong name. The browser even accepts numbers. So if you
enter )*+) you will get )i *+,).
The second form is a little bit more sophisticated. If you try to enter a simple string -
your name for e#ample it won)t work -unless you have a . in your name.../. The
criteria for accepting the input as a valid e-mail address is the .. & single . will do it
- but this is certainly not very meaningful. 0very Internet e-mail address contains a .
so it seems appropriate to check for a . here.
What does the script for those two form elements and for the validating look like1
ere it goes2
<ht ml >
<head>
<scri pt language="JavaScript" >
<! - - Hide
function test1(form)
if (form!te"t1!val ue == "")
alert("#lease enter a string!")
else
alert("Hi "$form! te"t1!val ue$" ! %orm input o&!")'
(
(
function test)(form)
if (form!te"t)!val ue == "" **
+ - *
form!te"t)!val ue!inde"+f(,-,. /) == - 1)
alert("0o valid e- mail address!")'
else alert("+1!")'
(
22 - - >
<2scri pt >
<2head>
<3od4>
<form name="f i rst" >
5nter 4our name6 <3r >
<i nput t4pe="t e"t " name="t e"t 1" >
<i nput t4pe="3ut t on" name="3ut ton1" value="7est 8nput"
on9lic&="test1(this!form)" >
<#>
5nter 4our e- mail address6 <3r >
<i nput t4pe="t e"t " name="t e"t )" >
<i nput t4pe="3ut t on" name="3ut ton)" value="7est 8nput"
on9lic&="test)(this!form)" >
<23od4>
First have a look at the T!"- code in the body- section. We 3ust create two te#t
elements and two buttons. The buttons call the functions test*-.../ or test4-.../
depending on which button is pressed. We pass this.form to the functions in order to
be able to address the right elements in the functions later on. The function test*-form/
tests if the string is empty. This is done via if -form.te#t*.value 55 66/... . )form) is the
variable which receives the )this.form) value in the function call. We can get the value
of the input element through using )value) in combination with form.te#t*. In order to
look if the string is empty we compare it with 66. If the input string e7uals 66 then no
input was done. The user will get an error message. If something is entered the user
will get an ok.
The problem here is that the user might enter only spaces. This is seen as a valid
input, If you want to( you can of course check for these possibilities and e#clude
them. I think this is 7uite easy with the information given here.
8ow have a look at the test4-form/ function. This function again compares the input
string with the empty string 66 to make sure that something has been entered. 9ut we
have added something to the if- command. The :: is called the ';- operator. $ou have
learned about it in part < of this introduction. The if- command checks if either the
first or the second comparison is true. If at least one of them is true the whole if-
command gets true and the following command will be e#ecuted. This means that you
will get an error message either if your string is empty or if there isn)t a . in your
string. The second operation in the if- command looks if the entered string contains a
..
Submitting forms
+ - 4
What different possibilities do e#ist for submitting the contents of a form1 The easiest
way is to submit the form input via e-mail. This is the method we are going to look at
a little closer. If you want to get feedback without e-mail and want the server to handle
the input automatically you have to use %=I at the moment. $ou would need %=I for
e#ample if you wanted to make a search engine like $ahoo- where the user gets a
result 7uickly after the form input. e does not have to wait until the people
maintaining this server read the input and then look up the information re7uested. This
is done automatically by the server. JavaScript does not have the functionality to do
things like this. 0ven if you want to create a guestbook you can)t make the server to
add the information automatically to an e#isting T!"- page with JavaScript. 'nly
%=I can do this at the moment. 'f course you can create a guestbook with the people
answering via e-mail. $ou have to enter the feedback manually though. This is ok if
you don)t e#pect to get *>>> feedback mails a day.
This script here is plain T!". So no JavaScript is needed here, 'nly( of course( if
you want to check the input before the form is submitted you will need JavaScript. I
have to add that the mailto- command does not work for every browser- but the newer
browsers support it.
<%+:; ;57H+<=#+S7 =978+0="mai l to64our>email-goes!here" >
<H?><o 4ou li&e this page@<2H?>
<80#A7 0=;5="choice" 7B#5=":=<8+" C=DA5="1" >0ot at
all! <E:>
<80#A7 0=;5="choice" 7B#5=":=<8+" C=DA5=")"
9H5915<>Faste of ti me!
<E:>
<80#A7 0=;5="choice" 7B#5=":=<8+" C=DA5="?" >Forst site of
the 0et!
<E:>
<80#A7 0=;5="su3mi t " 7B#5="SAE;87" C=DA5="Send" >
<2%+:;>
$ou will get the feedback through e-mail by doing this. The only problem is that you
will receive a mail that might seem very cryptic at the first glance. Sometimes all
spaces are filled up with )?) and sometimes they are filled up with )@4>).
So?this?might?look?like?this. There are some parser programms out on the 8et( I
believe( which will put the received mail in to a nicer format.
There is another nice thing so you can make your form elements a little bit more
user-friendly. $ou can define which element is in focus at the beginning. 'r you could
tell the browser to focus on the form where the user- input was done wrong. This
means that the browser will set the cursor into the specified form- element so the user
does not have to click on the form before entering anything. $ou can do this with the
following piece of script2
function setfocus()
+ - A
document!fi rst!te"t1!focus()'
return'
(
This script would set the focus to the first te#t- element in the script I have shown
above. $ou have to specify the name of the whole form - which is here called first -
and the name of the single form element - here te#t*. If you want to put the focus on
this element when the page is being loaded you can add an on"oad- property to your
BbodyC tag. This looks like this for e#ample2
<3od4 onDoad="setfocus()" >
Last changed: 11.May'96
1996 by Stefan Koch
+ - D

Introduction To Javascript - Part 7: Validating Form Input

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introduction To Javascript - Part 7: Validating Form Input

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction to JavaScript - Part 7

1996 Copyright by Stefan Koch. All rights reserved.

S-ar putea să vă placă și