HTML Forms

Validating Form Input

One of the most common ways that JavaScript is used on the Web is to check to see that a form is filled out properly. Many times, users will leave fields blank, either intentionally or otherwise.

In other instances, users will input values that cannot possibly be valid. For example, in a field where someone is supposed to enter a 10-digit phone number, they might enter only one or two characters.

The typical way to deal with an invalid form is to create a JavaScript "alert" that lists the fields that have not yet been filled out correctly. It is better to show the user all the incorrect fields at once than to show them one at a time. Seeing them one at a time leads the user to believe that only one mistake needs to be corrected.

Below is all of the code used on this page:

if (message != "") alert(message);
}
</script>
<form>
<fieldset>
<legend>
Registration Form
</legend>

First Name

<input type = "text" name = "firstname">
<br>
Last Name
<input type = "text" name = "lastname">
<br>
State
<select name = "state" size = "1">
<option value = "MD">Maryland
<option value = "DC">District of Columbia
<option value = "VA">Virginia
<option value = "NY">New York
<option value = "oth">Other
</select>
<br>
<input type = "radio" name = "gender">Male
<input type = "radio" name = "gender">Female
<br>
<input type = "checkbox" NAME = "newsletter">Sign up for newsletter
<p>
Click Here to register:
<input type = "button" name = "submit" value = "register" onClick = "alertUser(this.form)">

</fieldset>
</form>

Page created by Arnold Kling. Last Modified November 5, 2001.