HTML Markup | JavaScript | Java | Home & Links

Tutorial 12 - Validation Examples

This page demonstrates several validation techniques and form applications.

Multiple Field Check

In some situations the same type of validity check has to be repeated over many fields. A simple method is to create an array by adding the same name attribute to each field and using DOM access methods. Uses the verify() function. Counts and column sums can also use arrays.

Testing Multiple Fields
Each entry box must be filled in with a single digit, no alpha or punctuation or blanks allowed. Note how focus is set at error but user can refocus if desired.
 

Note: To convert this form to one that is submitted by email using the mailto protocol, view my forms projects page.

Blank Fields Check

Forms often require at least some data in a field before submission. This generic form aligns labels/entry boxes with the table method. Uses the chkForm() function which can also clear a specified field (or 'all').

Registration Information
Fields marked * are required!

Multiple Valid Answers

Some Entries have alternative answers that are equally correct. The validation function should then scan an array of correct answers looking for a match. Any match returns a true flag. Uses the validmany() function.

Name one color in the American flag:

Text Analysis

Word count analysis require breaking up (ie. parsing) the source text into words (ie. tokens) that are terminated (ie. delimited) with spaces or punctuation. Fortunately JavaScript has the built-in string method split() which breaks a string into array items based on a delimiter symbol. CountWords() shows how the text is first prepared by adding leading/lagging spaces and changing other white space into plain space by using the string method replace(). Then the split() method with space as its delimiter is used to place all the 'words' into an array called splitString. The length of this array is the number of words in the text.

Word Count Utility

Concordance is the counting of each occurrence of each word and providing the results in a table fashion either sorted by alpha or sorted by most frequently used. This type of utility quickly leads to creating a spell checker.

Budget Form

Pro forma (aka projected) budgets distribute income into accounts based on percentages. In this form the account names and breakdown ratios can be easily altered by the user. Entries are saved in cookies. Cut/paste the form from this page's source and grab the code here. The number of accounts is parameterized (ie easily extendable).

Pro Forma Budget Calculator
Red = Over Budget | Yellow = Read Only Zone
  • Budget Amount:
  • $
  • $
  • $
  • $
  • $
  • %
  • %
  • %
  • %
  • %

Historical budgets record the actual amounts spent in each account and calculate total spent and percentages for each account. Targeted budgets record the total to be spent as well as the actual amounts spent. They calculate percentages spent and amount remaining. Budgets.zip is a working demo of a targeted budget form. It can be easily expanded or styled.

Health Checkup Form

A Body Mass Index of more than 25 indicates that you are overweight. A BMI factor of 30 or more indicates obesity. Being overweight can cause many health problems such as heart disease, strokes and diabetes. And if you should live long enough there is an increased chance of Alzheimer's. Just a word to the wise. Grab the code here!.

Body Mass Index Calculator

Fuel Efficiency Converter

Our environment is under assault. We have NOT been good stewards of the land loaned to us by our Creator! The simple rules of REDUCE - REUSE - RECYCLE are not being followed.

Vehicle fuel emissions is a major factor of environmental pollution and is one of the few factors that individuals can help control. Reducing gas consumption also reduces our dependency on foreign oil and saves $$$ on the gas bill too! Careful driving, properly inflated tires, clean air filters and tune ups reduce consumption. The following utility calculates your current fuel consumption as well as making comparisons with newer vehicle claims. Grab the code here!

Fuel Efficiency Calculator
Metric Units
U.S. Units
Imperial Units
Info


JR's HomePage | Comments [jstutorc.htm:2016 02 12]