Improving the Registration Form - Exercise

Contact Us or call 1-877-932-8228
Improving the Registration Form - Exercise

Improving the Registration Form

Duration: 15 to 25 minutes.

In this exercise, you will make some improvements to the registration form from the last exercise.

  1. Open FormValidation/Exercises/FormValidation2.js in your editor. You will see that the functions discussed above have been added: checkRadioArray(), checkCheckBox(), checkSelect(), and checkTextArea().
  2. Open FormValidation/Exercises/Register2.html for editing.
    • Notice that the following changes have been made to the form:
      • State has been changed from a textfield to a select menu. The first option is meaningless. The next 51 options are U.S. states. The rest of the options are Canadian provinces.
      • Country has been changed to a radio array.
      • A Comments field has been added.
      • A Terms checkbox has been added.
    • Write code that:
      • Checks that a country is selected.
      • Checks that the country and state selection are in sync.
      • Checks that the terms have been accepted.
    • Add an event handler to the Comments textarea that alerts the user if the comment is too long.
  3. Test your solution in a browser.

Solution:

FormValidation/Solutions/Register2.html
---- C O D E   O M I T T E D ----
		if (!checkRadioArray(form.Country)) {
			errors[errors.length] = "You must select a country.";
		} else if (!form.Country[2].checked && form.State.selectedIndex === 0
			|| form.Country[0].checked && form.State.selectedIndex > 51
			|| form.Country[1].checked && form.State.selectedIndex <= 51
			|| form.Country[2].checked && form.State.selectedIndex > 0) {

			errors[errors.length] = "Country and State don't match.";
		}

		if ( !checkCheckBox(form.Terms) ) {
			errors[errors.length] = "You must agree to the terms.";
		}

		if (errors.length > 0) {
			reportErrors(errors);
			return false;
		}

		return true;
	}
---- C O D E   O M I T T E D ----

<tr>
	<td>State/Province: </td>
	<td>
		<select name="State">
			<option value="0">Please Choose...</option>
			<option value="AL">Alabama</option>
			<option value="AK">Alaska</option>
			
---- C O D E   O M I T T E D ----

			<option value="QC">Quebec</option>
			<option value="SK">Saskatchewan</option>
		</select>
	</td>
</tr>
<tr valign="top">
	<td>Country:</td>
	<td>
		<input type="radio" name="Country" value="USA"> United States<br>
		<input type="radio" name="Country" value="CA"> Canada<br>
		<input type="radio" name="Country" value="Other"> Other
	</td>
</tr>
---- C O D E   O M I T T E D ----

<tr valign="top">
	<td>Comments: </td>
	<td>
		<textarea name="Comments" cols="30" rows="3" wrap="virtual"
		onblur="checkTextArea(this, 100);"></textarea>
	</td>
</tr>
---- C O D E   O M I T T E D ----
Next