Consider this scenario: You are told to create a small
program that must contain a screen with an email field. If a user populates the
email field with something other than a valid email address, an error will be
displayed. Otherwise, some program should be called.
How would you
solve this task? Load SEU with an empty member and then start coding? Of course
not. You would copy a program that most closely suits your needs and then modify
it.
The same thing applies when you need some JavaScript code to solve a
given task. Let's consider this task of creating a form that holds an email
field. Before sending off the data to your server, the email should be validated
and converted to lowercase. You could of course let the CGI program do the task,
but why not add some JavaScript that would do the job?
"Yes," you say,
"but how do I find the correct code? I'm not a JavaScript programmer, and I'm
not very good at all this funny-looking code."
Well, here's how I did
it. I fired up Google, and in the search field, I wrote "javascript validate
email dynamic drive." I wrote "dynamic drive" because I know that this Web site
holds a lot of good, useful examples.
My search revealed this simple
script:
This
scripts sets up a regular
expressions string, which is then used to validate the email entered in the
form. If an error is found, an alert is displayed and "false" is passed back to
the form. The script will do 90 percent of what I need, and I'll modify it
later.
Next, I needed to find a script that translates a string to
lowercase, and I wanted that to happen while I type. I did a Google search for
"javascript lowercase onchange" and got this example called "All lower
case":
Notice
the OnChange and toLowerCase. That's just what I wanted, so 90 percent of that
part is done as well.
I have now found two scripts that will do most of
the job. Now comes the hard part, where I have to do something myself.
If
you don't know anything about JavaScript at all, you have to get some basic
knowledge. I recommend the JavaScript Tutorial page at
the W3 Schools Web site. This is a great
site with a lot of good, easy-to-understand examples. Even if you have some
knowledge of JavaScript, you should look at these scripts. I have found that
it's not hard to modify them to do what you want them to do.
The HTML Form
Here is how my HTML form looks. This is where we'll
incorporate the script.
</font></tt><br><tt><font face="Courier New">JavaScript
made easy - part
1</font></tt><br><tt><font face="Courier New">
Please enter your information and click
submit
Email
In
the email validation example, this script is placed in the
section,
so that's where I'll add it.
Now I have
this:
</font></tt><br><tt><font face="Courier New">JavaScript
made easy - part
1</font></tt><br><tt><font face="Courier New">
Next,
I'll add an event to the Submit button that calls the JavaScript function when
clicked. It will look like this:
Now I only need to add some
code so that the letters will be converted to lowercase as I type.
If you
look at the second example I found, you'll see the following
line:
This completes the first of a series of TechTips about how to find the
correct script and change it a bit to suit your needs.
To keep you on
your toes, the example I provided has a weakness, and I'm looking forward to
seeing you find it. See you in the forums!
Jan
Jorgensen is one of the founders of Flexware.dk, which specializes in i5 Web
solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him
at
This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
.
(He is still working hard to get the flexware.dk Web site up and
running.)
