Recipe 7.1. Preventing Blank Form Fields

Problem

You need to make sure visitors to your site fill in all the required fields in your web site form.

Solution

Use the onBlur, onClick, or onSubmit JavaScript event handlers in your form to check for empty fields before the form data is sent to the server.

Discussion

A well-written PHP or CGI script will check the data it gets from a web form before it performs its actions on it. If required fields are missing, the script should show the user an error page, rather than saving incomplete information in a database.

Error-checking in your server-side scripts requires a hit on your web server and causes your user to wait; you can head off an unnecessary connection by checking form data before it gets sent. Testing required fields for a value with JavaScript will save time and processing resources on your server:

 <form action="form.php" method="post"> <fieldset> <legend>&#x260E; Contact Information</legend>  <h3>Name *</h3>   <input name="name" type="text" size="20" maxlength="20" tabindex="1"    onBlur="if(this.form.name.value=='')        {alert('Please fill in your first and last name.')};">  <h3>Email Address *</h3>   <input name="email" type="text" size="20" maxlength="20" tabindex="2"    onBlur="if(this.form.email.value=='')       {alert('Please fill in your email address.')};">  <h3>Phone Number *</h3>   <input name="phone" type="text" size="12" maxlength="12" tabindex="3"    onBlur="if(this.form.phone.value=='')       {alert('Please fill in your phone number.')};"><br>   <input name="Send" type="Submit" value="Send"    onClick = "if (this.form.name.value == '' ||                  this.form.email.value == '' ||                  this.form.phone.value == '')        {alert('Please fill in the required fields marked with an         asterisk (*).');return false;};"/>   <input name="f" type="hidden" value="send"> </fieldset> </form> 

This simple form code uses JavaScript embedded in the input and submit button elements to display alert messages (see Figure 7-1) if fields are left blank.

HTML form fields have focus when the cursor is in the field and they are blurred when the user clicks or tabs away from the field. The onBlur event handler in each text input in this form activates a warning when the form respondent leaves the field blank.

The Submit button has an onClick event handler that tests all three required fields. If any are blank, the warning message appears when the user selects the Submit button. (In JavaScript, as well as PHP, two vertical bars (||) are shorthand for or, so the condition expressed in the Submit is true if the name, email, or phone fields are blank.) This effectively disables the submit button until the three required fields in the form have been filled in. You also can put the JavaScript code in a function, like this:

 <script type="text/JavaScript" language="JavaScript"> <!-- function checkForm(name,email,phone) {  if (name == '' || email == '' || phone == '') {   alert('Please fill in the required fields marked with an asterisk (*).');  } } //--> </script> 

Figure 7-1. A warning message pops up when a user skips a required field

Then call the function using the onClick event handler in the submit button:

 <input type="Submit" value="Send" onClick="checkForm(this.form.name.value,this.form.email.value,this.form.phone. value);return false;"/> 

See Also

Recipe 7.4 explains how to actually change the user's entered information on the fly.