January 9, 2007
Over View of JavaScript – highlighting Form Validation
JavaScript is a CLIENT side programming language. It is faster if basic data entry is verified on the Users PC/MAC before the time is spent sending it over the internet.
What is Form Validation?? Form validation is a way the web site can insure that information is correctly entered into a form. Form Validation can take on many variations – the most frequently used are:
1. Empty Fields ex. Pressed Submit or Hit Enter before data was entered
2. Entering letters where there should be numbers ex. Phone numbers
3. Entering incomplete e-mail addresses ex. Email address does not contain an @
Why is Form Validation Important??
1. That Data is clean – or as clean as can be
2. Elimates garbage records
3. Makes users aware immediately that they have entered missing or bad data
Required fields are denoted by a red *
<script language="javascript">
<!-- //Checks for no empty field in f_name & l_name, checks for e-mail correctness //-->
function verifyTheForm(){
if (document.registrationForm.f_name.value.length < 1){
alert('Please enter your FIRST name!');
return false;
} else
if (document.registrationForm.l_name.value == ''){
alert('Please enter your LAST name');
return false;} else
if (document.registrationForm.email1.value.length < 6
|| document.registrationForm.email1.value.indexOf('@') == -1
|| document.registrationForm.email1.value.indexOf('.') == -1){
alert('Please enter a valid e-MAIL!');
return false;} else
{
return true;
}
}
</script>In this example - the Web Page relies on each users personal computer's Operating System E-Mail package. If
If you don't have the ability to send mail with your operating system. For example - when I use HTML or JavaScript I can send e-mail by using my Operating Systems Outlook or Outlook express if your using a Windows machine. The Mac Operating systems has a comparable built in e-mail.
However many students or people working remotely do not have access to the computers operating systems e-mail - like when you are at CCV. So what can you do for your web site's e-mail capabilities? Well you can a web host to do it for you.
Jack's FormMail is a web host that for about a $1 (for 100 e-mails) per month will allow you to use their web host - to compose the e-mail and send it to the e-mail address you specify. Who would use this?? Anyone who's web host does NOT allow them to run mail CGI or PHP scripts. Those using STWEB or ePortfolio who want any user to be able to send them an automated e-mail. Jen Kramer of http://FocusedConsulting.com uses this one on her site.
http://www.dtheatre.com/scripts/formmail
How are subdirectories arranged?
JavaScript can be in-Line with your HTML or retrieved from an external file just like CSS. The file extension for External JavaScript is .js, for CSS it is .css. Using Advanced HTML, CSS and JavaScript is what makes up DHTLM-Dynamic HTML.
Many new sites are creating subdirectories called /assets to store both external .css, and .js - similar to the standard /images for .jpg or .gif graphic picture files.
Sites that have no form Validation – or – Limited Form Validation
http://www.redreddesign.com/#contact – thanks you for your inquiry
http://crisfieldgroup.com – displays what it has sent
Sites that have forms with Validation:
http://vermontgardenclubs.org -
The Vermont Garden Club – is one of my cobblers child sites – this is a site I maintain – it has this nice form – and finally I added some validation. . Since the e-mails come to me – this is what I see:
-----Original Message-----
From: Jil MacMenamin [mailto:jilmac@sover.net]
Sent: Tuesday, January 09, 2007 10:31 AM
To: jilmac@sover.net
Subject: Inquiry from a Garden Person
Name= JilMac
e-Mail= JilMac@sover.net
Interests=
Message= This is a test message
Submit=Send to Garden Club
Note: this will only work on computers that have the computers operating system e-mail package set up to work. For those students who are using a computer that is shared and may NOT have an CLIENT based e-mail system (ex. Yahoo Mail, AOL Mail, HotMail, etc) This will not work – then you need a SERVER based solution. And that is another lecture/workshop)
Notice Jen’s “Did you know” – this is because this form uses a SERVER based program PHP it is able to use the server’s programs to send an e-mail. It is NOT THE FORM that is doing this – IT IS THE PROGRAM – do a View, Source and look at:
Line 38 <form method="post" action="sendit.php" name="contact">
The ACTION = “sendit.php” is the server’s program sendit that does the work.
This means that Jen’s Web Host has PHP loaded and a program called sendit.php that contact.html has access to use.
The error message states that this program is using or what the programmer states … powered by
“ This form is powered by Jack's Formmail.php 4.2!”
Note: It is free – but does require that you use the proper siting to use it.
Also note – that this will work for certain versions of PHP – as the versions change – this program may need to be upgraded. This will depend of the version your web host uses.
NEAUG Site’s form
General Question: http://www.neaug.org/index.php?option=com_contact&task=view&contact_id=1&Itemid=8
Edit your Profile:
Three types of Field Verification:
1.Compare one field to another field,
Ex. Enter your e-mail address twice
The theory is that if you have to type it once and then type it again
– you’ll get at least one of them right and then you can re-enter them both correctly
2. Enter all your forms data – when you click the Submit button – the verification will run.
Ex. All data is entered, the On-submit is run against all the fields.
http://stweb.ccv.edu/CIS-2140-VO01/jam08260/6E_Scripts/chap07/script10.html
This is from Chapter 7 Form Handling of the Visual QuickStart JavaScript & Ajax
Errors are displayed – or fields are highlighted – you fix them and re-Submit
3. Each field is validated before you move to the next field
Ex. http://stweb.ccv.edu/CIS-2140-VO01/jam08260/6E_Scripts/chap08/script01.html
JilMac’s favorite – it happens before you are moved to the next field.
But this may be better left for a future discussion.
To verify exactly what makes up an e-mail address - many engineers use Regular Expressions:
http://stweb.ccv.edu/CIS-2140-VO01/jam08260/6E_Scripts/chap08/script01.html
function validEmail(email) {
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;return re.test(email);
