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 | Multiple Address Submit

JavaScript Form Projects

This page contains form / control element projects that involve design, validation and submission techniques. The working samples can be used as quick study learning sessions. Note that the form element is only required for server submission or enter-key action. 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.

Read this page's source code for both the sendMail() function and the form design. And there are the setall() and clearall() functions that may be useful in other forms as well.

Multi-Address Submission Utility


JR's HomePage | Comments [jsprojf.htm:2015 11 25]