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 use the Common String Methods table as a reference.

  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 use e.preventDefault(); to prevent the form from submitting.
  3. Test your solution in a browser.

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.

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){

	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 src="FormValidation.js"></script>
<script>
function validate(e){
	var firstName = document.getElementById("FirstName").value;
	var midInit = document.getElementById("MidInit").value;
	var lastName = document.getElementById("LastName").value;
	var city = document.getElementById("City").value;
	var state = document.getElementById("State").value;
	var country = document.getElementById("Country").value;
	var zipCode = document.getElementById("Zip").value;
	var email = document.getElementById("Email").value;
	var userName = document.getElementById("Username").value;
	var password1 = document.getElementById("Password1").value;
	var password2 = document.getElementById("Password2").value;
	var errors = [];
	
	if (!checkLength(firstName,1,100)) {
		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,1,100)) {
		errors[errors.length] = "You must enter a last name.";
	}

	if (!checkLength(city,1,100)) {
		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,1,100)) {
		errors[errors.length] = "You must enter a country.";
	}

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

	if (!checkLength(userName,1,100)) {
		errors[errors.length] = "You must enter a username.";
	}
	
	if (!checkLength(password1,1,100)) {
		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);
		e.preventDefault();
	}
}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);
}

window.onload = function() {
  document.getElementById("registrationform").addEventListener("submit", function(e){
      validate(e);
  });
}
</script>
---- C O D E   O M I T T E D ----

Next