|
 |
|
|
|
This is Javascript for IE5. See our policy on browser-specific JavaScript. In the first article in this series, we examined several techniques to prevent forms being submitted with incomplete data. This article begins by covering the final element of the 'required' technique, which is the <SELECT> element. We will then examine the Regular Expression, and use it to narrow and refine the range of inputs allowed in a form field. Finally, we shall look at techniques which use the HIDDEN field to pre-process form data into a more useable style. The result of learning all this JavaScript is that we are able to create forms that validate and process their data before they are sent - saving the recipient work.Required SELECT FieldThe <SELECT> element offers the viewer several display options. We can create either a drop-down list or scrollable list box. The basic selection process is either exactly the same as a group of radio boxes, or similar to a group of checkboxes, with the exception that the viewer must choose at least one of the available options. The <SELECT> element suffers from the same problem as radio boxes. It is possible for the viewer not to select an item at all, and we wish to avoid this. And again like radio boxes, it is possible for the viewer to accidentally or lazily submit the default option. This is not a problem, technically, but it will result in unbalanced results from the form. You will find an unreasonable bias towards the default option, rendering any information gained from the form useless. The following code prevents the user from submitting the default option from a SELECT element. The default option must be a dummy option, which says something like 'Please choose'. <HTML> We intercept the onsubmit event, and get re-routed to the validate() function, which checks the form for illegal input. if (mainform.Salary.options[0].selected) { This line asks if the first option is the selected option. The first option in this program is the dummy and default option. Note that we use 0 instead of 1 for the first option. Lists and arrays are often zero-based, which means the first item is at index 0. If the code is true, i.e. mainform.Salary.options[0] is selected , then the viewer has not satisfactorily answered the question, and is prompted to try again. We must also cancel the onsubmit event, in order to prevent the incorrect form being submitted. This technique also works for SELECT elements with the MULTIPLE attribute, and for different SIZE attributes. The code will prevent any submission containing the dummy element, but otherwise will accept the input. The next validation technique involves checking the actual text input to a field, and uses Regular Expressions. Using Regular ExpressionsRegular Expressions define templates for strings and numbers. A template is a pattern of characters. Regular expressions provide a complete syntax for defining any template - so we can detect patterns like two letters and a number, a word with the letter 'w', a word without an 'e', and so on. The following program scans any input for exactly three consecutive lower case letters. Depending on the result of the scan, the viewer is told whether they did or did not input exactly three consecutive lower case letters. <HTML> The variable three in this program is a regular expression. We may also use the JavaScript object RegExp to define the variable. three=new RegExp("^[a-z]{3}$"); The regular expression three is a template for exactly three consecutive occurrences of any character from a through to z. The ^ and $ sign match for the beginning of the text and the end of the text respectively. This ensures that the template defines a pattern that has exactly three lower case letters between the start and end of the text. When we come to use the regular expression variable, we use it in a test against a string. The general syntax for the test method of the regexp object is: regexp.test(string) In this case, we use: three.test(mainform.TEXT1.value) This line tests the text entered in the text box against the regular expression, and returns true if it finds the pattern in the text. We can define a regular expression to look for any character and any pattern. Typical uses for regular expressions include a name, which may only contain letters, plus hyphens and full stops, or a phone number, which may only contain numbers. Or, if you have an indexed database, you may only allow entry of reference numbers, e.g. A756 or D342. <HTML> The RegExp in this program looks for a string containing an upper case letter and exactly three digits following it. Regular ExpressionsBasic regular expressions can be defined using the following:
These may be grouped, so [abc] is an a, b or c We can also use negation. [^abc] is any character except for a, b or c. Special groups include:
We can also define the number of occurrences:
We can also match for text position:
So, refno=/^[A-Z]{1}\d{3}$/; defines a regular expression which looks for exactly one of [A-Z] followed by exactly three of [0-9]. Common regular expressions include:
HIDDEN INPUT typeThe HIDDEN INPUT type is invisible to the viewer, but can be submitted along with the form data. This is useful because we can use client-side JavaScript to pre-process the form. Let us look at an example. <HTML> With this code, once the form has been submitted, we intercept the onsubmit event, and pass control to the preprocess() function. The preprocess() function examines the data from the form, and constructs a value for the HIDDEN INPUT type field. This presents a message to the recipient of the form data like: Jon Perry likes Music, Sport, Travel. HIDDEN techniques for the SELECT elementWe can apply the same theory to the first example in this article to parse the value of the salary selection group. The code is basically the same as before, with a few additions. <HTML> function validate() { function preprocess() { These changes produce data that can easily read by the human eye, rather than single digit codes that require interpretation. There are a few more techniques we are going to look at in the last article in this series, such as 'intelligent forms', which change their questions according to certain answers, using JavaScript to make forms look good, and dynamically changing a form's content - useful for quizzes. Jon Perry is a Freelance Author and Programmer from the UK. |
| Suits | Ponytails | Propheads | Contact WDJ | Discuss | Web Audio | Search |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 