Making Form Fields Required
Different form handling programs have different methods of determining which form fields are required. And some form handling programs don't have that feature at all.
Many form handling programs use field name="required", often implemented as a hidden field in the form, to obtain a list of form fields that must contain information for successful submission. But this is not a standard.
When the method a particular form handling program uses is unknown, or in situations where the identity of the program to handle the form submission isn't known, JavaScript can be used to verify form fields required to contain information do in fact contain information.
An advantage of using JavaScript
JavaScript is fast.
Because it is fast, it's common to use JavaScript even when the form handling program also does error checking.
JavaScript can provide an error message immediately following the click of the submit button. Error messages from form handling programs can be displayed only after the form submission has been sent over the Internet to the form handling program.
A disadvantage of using JavaScript
Not all browsers have JavaScript enabled.
When JavaScript is disabled, the JavaScript code can not force required fields to have information before the form can be submitted.
Therefore, even when JavaScript is used for its near-instant messages, it may be prudent to use a form handling program with the ability to determine which form fields are required. When JavaScript is disabled, the form handling program can still catch any blank required fields.
An example form for required fields
Here is an example of a form that will use JavaScript to force both the YourName and the YourEmail fields to contain information before the form can be submitted.
The onsubmit="return ValidateRequiredFields();" attribute in the FORM tag calls the JavaScript to check for blank required fields.
If any required are blank, the JavaScript returns the value "false" and the submission is aborted. Otherwise, the JavaScript returns the value "true" and submission proceeds.
To prepare your current forms for the JavaScript, do these two steps:
The JavaScript to enforce required fields
The following JavaScript should be put somewhere above the form that has required fields. It can be in the HEAD area or in the BODY area of the web page source code.
The JavaScript has two places to customize:
-
The first place is where the form's name is specified. In the example form, above, the form's name is "theForm"
-
The second place to customize requires a comma-separated list of the form field names that are required.
That's all the customization necessary.
The JavaScript code itself contains instructions.
The above JavaScript can be copied and pasted into the web pages containing your existing forms. Simply customize the two places and you're good to go.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©Copyright 2005 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
