HTML Markup | JavaScript | Java | Home & Links
JR's HomePage | JavaScript Home | Site Map | Page Bottom
Validation: E-mail Address | Postal Code | Sales Order Form
Email Form Submit | Multi-Address Submit | Secure Feedback Link

JavaScript Form Projects

This page contains control element and form projects that involve design, validation and submission techniques. The working samples can be used for quick study sessions. Check Big Projects, Short Projects and Webpage Effects for more ideas.

E-mail Address Validation

An example of brute force data validation is checking an e-mail address. First check for the @ symbol. Refinements would check for at least one dot after the @ and characters before, between, and after the symbols. A further refinement would make sure that there is at least two alphabetic characters after the last dot. Thorough validation would check two character final character combinations (Top Level Domain or TLD) against a list of valid ISO country TLD's. Also scan for illegal punctuation never found in e-mail addresses. Validation with regular expressions is much easier. If your scripts rely heavily on input validation, it is well worth the effort to learn regular expression syntax.

Postal Code Validation

Another example of brute force data validation is postal code checks. As each country has their own format, you should use the country field to select the required validator function. As an example of how a postal code validator function can be constructed, first review Canada's Postal Code rules:

  1. Letters and numbers alternate for exactly six characters (eg L0S1E0)
  2. D, F, I, O, Q and U are never used as they can cause optical reader issues
  3. W and Z are not used as the first letter (region designator)
Postal Code Test  

Once again validation with regular expressions is much easier, once you master the syntax. If your scripts rely heavily on input validation, it is well worth the effort.

Sales Order Form

Order forms normally include extended prices, totals, taxes and handling charges. A start on a simple order form is given, you should 'flesh it out' with:

Refer back to multiple field validations for the technique for handling many similar line items.

Sales Order Form
Item Description Quantity Unit Cost Extension

Major project extensions: Add shipping and handling charges and checkboxes for non-taxable items. Use select boxes for products that when chosen, fill in the unit cost field (preventing the need for some error checks). A long term project could contain item descriptions (perhaps even images) with checkboxes. A checked box places the item on the order form. This may include the quantity level which is echoed to the form.

Email Form Submission

Javascript can build a mailto: service URL dynamically with any form data added to the body component. A link can reference this URL to send the data to the destination for processing as text. Read this page's source code for the mailForm() function, the form design and the styling rules. This example uses stylesheet floating divs for alignment.

Caution: Some browser|mailer combinations prohibit form submission to a mailto URL. Other mailers may have to be manually configured to allow for the feedthrough of body data.

Email Form Submission
Order Information

Multi-Address Submission

Often forms can be prepared once for submission to several sites. Examples include information forms to be sent to several providers, a search request sent to various engines or even a list my site request to several search engine submission addresses. Rather than re-entering information, the user can select which addresses to send the single message to. I use the this 'multiple mailer' utility as a joke remailer where I forward to all but the one who sent me the joke. The 'Submit Mail' button uses an onclick event to trigger a function that runs mailto to mail the data to sites selected by checkboxes. To break the project into smaller steps:

  1. Design the form. Use lots of style rules!
  2. Add address selector mechanism [Checkbox|radio buttons|select list].
  3. Make sure that the Send Mail! button doesn't submit the HTML way!!
  4. Add 'Set All Addresses' and 'Clear Addresses' functions.

Get the sendMail(), setAll(), clearAll() scripts here and the form design here.

Multi-Address Submission Utility


Secure Feedback Link

Unprotected mailto links can be data-mined with SpamBots by businesses and spammers to build mailing lists. Reduce the chance of your mailing address being data-mined by moving the link info to a dynamic JavaScript function:

Note1: Be sure to include an onload="feedback()" attribute on the body element and either a
<div id="feedback"> or a <span id="feedback"> element where you want the link to be displayed.

Note2: As with all scripts, the feedback function can be defined in an external file (say bin/onload.js) where bin is locked from viewing. Link to the external file with <script src="onload.js" type="text/javascript"></script> in the head section of all HTML documents using the feedback link. This is a good method for those who wish to include feedback links on many pages and makes changing the link a one-stop operation as well.

Beware: Several software vendors provide a ?protection? program that simply changes the address into character codes. These methods do not fool the data-miners though as the addresses can easily be reconstructed by their SpamBots. The scripting method described on this page provides slightly better protection as it is more dynamic. For more sophisticated techniques involving encoding you may wish to google Email Protect or similar terms.

JR's HomePage | Comments [jsprojf.htm:2016 01 28]