///Form Required Fields JavaScript Check

Form Required Fields JavaScript Check

Form Required Fields JavaScript Check

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.

2010-05-26T11:34:40+00:00 April 16th, 2005|JavaScript|0 Comments

About the Author:

Leave A Comment