|JR's HomePage |
Site Map | Page Bottom
Validation: E-mail Address | Postal Code | Sales Order Form
Email Form Submit | Multiple Address Submit
This page contains form and 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 now only required for server submissions or enter key action. Be sure to check my Big Projects, Short Projects and Webpage Effects pages for more ideas.
E-mail Address Validation
One example of brute force data validation is checking an e-mail address. The first check is for the @ symbol. Refinements would check for at least one dot after the @ and characters before, between, and after the symbols. Further refinement would find the last dot and make sure that there is at least two alphabetic characters after it. Very thorough validation would check any two character final character combination (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:
- Letters and numbers alternate for exactly six characters (eg L0S1E0)
- D, F, I, O, Q and U are never used as they can cause optical reader issues
- W and Z are not used as the first letter (region designator)
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. Note: Refer to form design for some basics. A start on a simple order form is given and you are encouraged to 'flesh it out' with:
- some simple math calculations
- automatic updates after changes
- assume that null entry implies null display
- calculate tax line including round off
Refer back to multiple field validations for the technique for handling many similar line items.
Major project extensions: This order form could be turned into a major project by adding shipping and handling charges and checkboxes for non-taxable items. Or perhaps select boxes for product 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
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.
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:
- Design the form. Use lots of style rules!
- Add address selector mechanism [Checkbox|radio buttons|select list].
- Make sure that the Send Mail! button doesn't submit the HTML way!!
- 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.