Bring Your Forms to Life With JavaScript

In this article we'll take a look at how to prevent errors in your forms and ultimately bring them to life through JavaScript. The source code for the samples used in this article can be downloaded here and a live example can be viewed here. Now let's add some life to those old forms.

Creating a basic Web form

We'll start by creating a basic registration form with a few common form elements. We'll create an HTML page and add the the registration form code from listing 1.

<form id="liveForm" action="" method="post">
   <fieldset>
    <div style="float: right;">* = required field</div>
    <legend>Live form</legend>
    <p>Your first name: * <br/><input type="text" name="firstName" /></p>
    <p>Your last name: * <br/><input type="text" name="lastName" /></p>
    <p>Your email: * <br/><input type="text" name="email" /></p>
    <p>Company: <br/><input type="text" name="company" /></p>
    <p>Street address: * <br/><input type="text" name="street" /></p>
    <p>State: *
    <br/><select id="state" name="state">
     <option value="" selected="true"></option>
     <option value="AK">AK</option>
     <option value="AL">AL</option>
     <option value="AR">AR</option>
     <option value="AZ">AZ</option>
     <option value="CA">CA</option>
     <option value="CO">CO</option>
     <option value="CT">CT</option>
     <option value="DC">DC</option>
     <option value="DE">DE</option>
     <option value="FL">FL</option>
     <option value="GA">GA</option>
     <option value="HI">HI</option>
     <option value="IA">IA</option>
     <option value="ID">ID</option>
     <option value="IL">IL</option>
     <option value="IN">IN</option>
     <option value="KS">KS</option>
     <option value="KY">KY</option>
     <option value="LA">LA</option>
     <option value="MA">MA</option>
     <option value="MD">MD</option>
     <option value="ME">ME</option>
     <option value="MI">MI</option>
     <option value="MN">MN</option>
     <option value="MO">MO</option>
     <option value="MS">MS</option>
     <option value="MT">MT</option>
     <option value="NC">NC</option>
     <option value="ND">ND</option>
     <option value="NE">NE</option>
     <option value="NH">NH</option>
     <option value="NJ">NJ</option>
     <option value="NM">NM</option>
     <option value="NV">NV</option>
     <option value="NY">NY</option>
     <option value="OH">OH</option>
     <option value="OK">OK</option>
     <option value="OR">OR</option>
     <option value="PA">PA</option>
     <option value="RI">RI</option>
     <option value="SC">SC</option>
     <option value="SD">SD</option>
     <option value="TN">TN</option>
     <option value="TX">TX</option>
     <option value="UT">UT</option>
     <option value="VA">VA</option>
     <option value="VT">VT</option>
     <option value="WA">WA</option>
     <option value="WI">WI</option>
     <option value="WV">WV</option>
     <option value="WY">WY</option>
     <option value="Other">Other</option>
    </select>
    </p>
    <p>Zip code: * <br/>
    <input type="text" name="zip" />
    </p>
   </fieldset>
   </br>
   <div id="innerFieldset">
    <input type="submit" value="Register" style="width: 100px;" />
   </div>
  </form>

The code from listing 1 will allow us to post data to a server and register a user. It could also display any errors or warnings based on server-side results, but this is equivalent to asking your users to complete a form and hope that it will be sent successfully. There's really no reason to make a user wait when we can provide them immediate feedback and prevent issues from occurring rather than having to deal with them after the fact. Having said that, it would be useful to have a JavaScript object that allows us to validate all our forms without having to rewrite code everytime we create a new form. Let's take a look at how to accomplish this by creating a reusable JavaScript validation object and tying it to the form we just created.

Bring Your Forms to Life With JavaScript

Creating a basic Web form

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos