Validating a Registration Form - Exercise

Contact Us or call 1-877-932-8228
Validating a Registration Form - Exercise

Validating a Registration Form

Duration: 25 to 40 minutes.

In this exercise, you will write code to validate a registration form. You may find it useful to reference the Common String Methods table in the String activity that we covered in the "Built-in" JavaScript Objects" lesson.

  1. Open FormValidation/Exercises/FormValidation.js for editing.
    • Create a function called compareValues() that takes two arguments: val1 and val2. The function should return:
      • 0 if the two values are equal
      • -1 if val1 is greater than val2
      • 1 if val2 is greater than val1
    • Create a function called checkEmail() that takes one argument: email. The function should return:
      • false if email has fewer than 6 characters
      • false if email does not contain an @ symbol
      • false if email does not contain a period (.)
      • true otherwise
  2. Open FormValidation/Exercises/Register.html for editing.
    • Add code so that the functions in FormValidation.js are accessible from this page.
    • Create a validate() function that does the following:
      • Checks that the FirstName, LastName, City, Country, UserName, and Password1 fields are filled out.
      • Checks that the middle initial is a single character.
      • Checks that the state is exactly two characters.
      • Checks that the email is a valid email address.
      • Checks that the values entered into Password1 and Password2 are the same.
      • If there are errors, passes reportErrors() the errors array and returns false.
      • If there are no errors, returns true.
  3. Test your solution in a browser.

Challenge

In FormValidation/Exercises/FormValidation.js, modify the checkEmail() function so that it also checks to see that the final period (.) is after the final @ symbol. The solution is included in FormValidation/Solutions/FormValidation.js.

Debugging Tip

Sometimes catching JS errors on this exercise can be tricky, because if the JS breaks, the form is submitted with the errors without you knowing it. To help you debug this exercise, do this:

  1. Get Firebug for FireFox this is, among other things, the most advanced JavaScript debugger available for any browser.
  2. On the Firebug webpage, be sure to take a quick look at the console log section; this is where you'll see JS errors being logged.
  3. On your exercise file, in the HTML markup, let's add a trigger so that the function validate() is invoked. We can add a click handler to, say, the heading. Like this:
    <h1 onClick="return validate(document.forms[0])">Registration Form</h1>
  4. Now open up your exercise file with FireFox, enable FireBug, click on the <h1> heading, and if there are any JS errors in your code, FireBug will let you know.

Solution:

FormValidation/Solutions/FormValidation.js
/*
	Function Name: checkLength
	Arguments: text,min?,max?
	Returns:
		false if text has fewer than min characters
		false if text has more than max characters
		true otherwise
*/
function checkLength(text, min, max){
	min = min || 1;
	max = max || 10000;

	if (text.length < min || text.length > max) {
		return false;
	}
	return true;
}

/*
	Function Name: compareValues
	Arguments: val1, val2
	Returns:
		0 if two values are equal
		-1 if val1 is greater than val2
		1 if val2 is greater than val1
*/
function compareValues(val1, val2){
	if (val1 > val2) {
		return -1;
	} else if(val2 > val1) {
		return 1;
	} else {
		return 0;
	}
}

/*
	Function Name: checkEmail
	Arguments: email
	Returns:
		false if email has fewer than 6 characters
		false if email does not contain @ symbol 
		false if email does not contain a period (.)
		true otherwise
*/
function checkEmail(email){
	if (!checkLength(email, 6)) {
		return false;
	} else if (email.indexOf("@") == -1) {
		return false;
	} else if (email.indexOf(".") == -1) {
		return false;
	}
	/* THIS LAST ELSE IF FROM CHALLENGE */
	else if (email.lastIndexOf(".") < email.lastIndexOf("@")) {
		return false;
	}
	return true;
}

Solution:

FormValidation/Solutions/Register.html
---- C O D E   O M I T T E D ----

<script type="text/javascript" src="FormValidation.js"></script>
<script type="text/javascript">
function validate(form){
	var firstName = form.FirstName.value;
	var midInit = form.MidInit.value;
	var lastName = form.LastName.value;
	var city = form.City.value;
	var state = form.State.value;
	var country = form.Country.value;
	var zipCode = form.Zip.value;
	var email = form.Email.value;
	var userName = form.Username.value;
	var password1 = form.Password1.value;
	var password2 = form.Password2.value;
	var errors = [];
	
	if (!checkLength(firstName)) {
		errors[errors.length] = "You must enter a first name.";
	}

	if (!checkLength(midInit, 1, 1)) {
		errors[errors.length] = "You must enter a one-letter middle initial.";
	}

	if (!checkLength(lastName)) {
		errors[errors.length] = "You must enter a last name.";
	}

	if (!checkLength(city)) {
		errors[errors.length] = "You must enter a city.";
	}

	if (!checkLength(state, 2, 2)) {
		errors[errors.length] = "You must enter a state abbreviation.";
	}

	if (!checkLength(country)) {
		errors[errors.length] = "You must enter a country.";
	}

	if (!checkLength(zipCode, 5, 10)) {
		errors[errors.length] = "You must enter a valid zip code.";
	}

	if (!checkLength(userName)) {
		errors[errors.length] = "You must enter a username.";
	}

	if (!checkEmail(email)) {
		errors[errors.length] = "You must enter a valid email address.";
	}

	if (!checkLength(password1)) {
		errors[errors.length] = "You must enter a password.";
	} else if (compareValues(password1, password2) !== 0) {
		errors[errors.length] = "Passwords don't match.";
	}

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

	return true;
}

function reportErrors(errors){
	var msg = "There were some problems...\n";
	var numError;
	for (var i = 0; i<errors.length; i++) {
		numError = i + 1;
		msg += "\n" + numError + ". " + errors[i];
	}
	alert(msg);
}
</script>
---- C O D E   O M I T T E D ----
Next