Use JavaScript to Check Required HTML Form Fields
By
William
Bontrager
You know how annoying it
is when you click a "submit" button, wait for the next page to appear, and
then all you get is the message, "___________ is required!" You fix that,
and another field is required. And another.
Here is a method to let your form user know, all at once and before sending
the information to a script, about each required form field that hasn't been
filed in (or checked, or selected). See the demonstration page at
http://willmaster.com/a/18/pl.pl?art188
A previous article, "Form Input Validation and Correction," demonstrated
how to verify email addresses are correctly formatted and some other functions,
including automatically upper- and lower-casing a name. You can find the
article at
http://willmaster.com/a/18/pl.pl?fivc
Here, you learn how to check any required form field, with each field having
a custom error message for explaining to your user exactly what is
expected.
The custom error messages are displayed in one alert box, which generally
is faster than creating a popup window and generating a custom web page for
it. Detailed instructions are in the source code downloadable from the
demonstration page at
http://willmaster.com/a/18/pl.pl?art188
The JavaScript functions can check not only any type of form field, but form
field sets.
A field set is two or more form fields of the same type with the same name.
Radio buttons are usually found in sets. However, checkboxes, text input
fields, and even file upload fields can also be in sets.
The JavaScript has separate checking functions for text input fields, sets
of text input fields, radio/checkbox fields, sets of radio/checkbox fields,
and dropdown list/select box fields. Each function needs to know either the
form field to check or the form field value to check.
Function WithoutContent() is used to check if a text input field is without
content.
Function NoneWithContent() is used to check if none of a set of text input
field have content.
Function WithoutCheck() is used to check if the single radio button or checkbox
is unchecked.
Function NoneWithCheck() is used to check if none of a set of radio buttons
or checkboxes are checked.
Function WithoutSelectionValue() is used to check if selected drop-down list
or select box entries are without value.
Your form will have a name for itself, specified in the FORM tag. This form
name will be used wherever a form field or form field value is specified.
For example, if your form name is "myname" and the form field name is "email",
you would refer to that form field as
document.myname.email
And you would refer to that form field's value as
document.myname.email.value
The JavaScript is told to check required fields by putting the attribute
onSubmit="return CheckRequiredFields()" into your FORM tag. (The demonstration
has an example.) The JavaScript CheckRequiredFields() checks the required
fields and returns either the value true or the value false.
If true, all required fields are used and the form continues it's normal
form submit procedure. If false, the form does not submit the form
contents.
In order to use this JavaScript, the only non-alphanumeric character your
form field names may have is the underscore. Replace any hyphens, colons,
spaces, or other non-alphanumeric characters in your field names with an
underscore character.
Once your form field names are in compliance, make a list of the names of
required form fields, along with the error message to display if the requirement
isn't satisfied.
Then, continuing with the example email field, you would put this into the
JavaScript at the place indicated by the instructions in the JavaScript:
if(WithoutContent(document.myname.email.value))
{ errormessage += "\n\nThe email address is required!"; }
Whenever the JavaScript finds one
or more error messages, it gathers them all together into one message and
displays them in an alert box under the heading "NOTE:". The \n\n in front
of the error message puts a blank line between it and anything above it.
Testing
When you test the JavaScript, if you get no error message even if a required
form field has not been satisfied, then either your browser isn't running
JavaScript or your JavaScript has an error somewhere.
Netscape browsers (version 4 and higher) are wonderful JavaScript debugging
tools; better, in my opinion, than other browser brands I've used. After
loading the page and clicking submit, type
javascript:
in the browser's address bar. If there were errors, the browser usually provides
a good indication of where and what the error is.
Conclusion
You have been introduced to a set of JavaScript functions you can customize
to display a pertinent error message whenever one or more required form fields
have not been used. Because the error messages are all in one quick alert
box, instead of one at a time from a CGI script, the JavaScript can reduce
form user annoyance when required information is omitted.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
