JavaScript Generator - Form Validation

This script will accept information about your form and automatically generate a validation script for you to paste onto your page to make sure no form fields were left empty

In the form below, enter your form name, and also the names of the fields that you want to require input for, clicking the appropriate radio button for the type of field.

The "Text" button will work on text boxes, text areas and password fields. The "Menu" button will work on pop-up menus and list boxes. The "Radio" button will work on, well, Radio buttons.

IMPORTANT: when validating radio buttons, be sure to enter the name of the radio group in question, and not the name of the individual button. This will require that at least one selection is made from the group.

SAFARI BROWSER PROBLEM: there is a validation problem with selection menu's on the BETA version of Apple's new Safari browser. If you wish to work around that, then make sure there's a top option in the menu such as "choose..." with a blank value. In the source code, the blank value will need to look like <option value=""> and not just <option>. (that's 2 quotes with nothing in between them).

CLICK HERE for an example form with script installed.

When completed, just hit the "generate script" button and your script should appear in the large text area below the form. See the instructions below to install the script in your page.

Make sure none of your field names have spaces or special characters, as this will cause a script error. Use only letters, numbers and underscores, and don't start a field name with a number. Fill in as many fields as you need (up to 10) and just leave the rest blank.

Form Name:  
Field Type: Field Name: Alert Name:
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   
Text    Radio    Menu   


Your Script:
(see installation instructions below)
 
 

Installation

Installing with Adobe GoLive:

To install this script in your GoLive page, you will need to reveal the head section of your page by clicking on the arrow next to the page icon at the top left of your document window. Drag in a "script" object from the "head" tab of the objects palette, double click to open, and paste in the text from the box above (exactly as it is, and make sure you selected all of it before copying).

Finally, you'll need to tell the page when to run the script. Select your form container in layout mode, and then switch over to source view. At the top of the hi-lighted code, you should see the form tag. You'll need to add the text...

onsubmit="return validateForm()"

...into the form tag so it looks something like this...

<form name="form1" onsubmit="return validateForm()">

IMPORTANT NOTE:  Once your script is installed into your GoLive page, select it up in the head section and make sure the language setting in the Inspector is set for "Navigator 4.x" (JavaScript 1.2). It will still run fine in Internet Explorer, but needs to have the language labeled correctly to run.

Now you should be ready to test!

Installing with another HTML editor:

To install this script into your HTML page, you will need to go to the HEAD section of your document (between the <head> and </head> tags at the top) and type in the starting script tag like this...

<script type="text/javascript"><!--

...then paste in the text from the box above (exactly as it is, and make sure you selected all of it before copying). after the last line of the script, type in your script closing tag like this...

// --></script>

Finally, you'll need to tell the page when to run the script. Find your opening <form> tag and add this attribute...

onsubmit="return validateForm()"

...into the form tag so it looks something like this...

<form name="form1" onsubmit="return validateForm()">

Now you should be ready to test!