Advanced Form Validation - Exercise

Contact Us or call 1-877-932-8228
Advanced Form Validation - Exercise

Advanced Form Validation

Duration: 25 to 40 minutes.
  1. Open RegularExpressions/Exercises/FormValidation.js for editing.
    • Write additional regular expressions to check for:
      1. Proper Name
        • starts with capital letter
        • followed by one or more letters or apostophes
        • may be multiple words (e.g, "New York City")
      2. Initial
        • zero or one capital letters
      3. State
        • two capital letters
      4. US Postal Code
        • five digits (e.g, "02138")
        • possibly followed by a dash and four digits (e.g, "-1234")
      5. Username
        • between 6 and 15 letters or digits
  2. Open RegularExpressions/Exercises/Register.html for editing.
    • Add validation to check the following fields:
      1. first name
      2. middle initial
      3. last name
      4. city
      5. state
      6. zip
      7. username
  3. Test your solution in a browser.

Challenge

  1. Add regular expressions to test Canadian and United Kingdom postal codes:
    • Canadian Postal Code - A letter followed by a digit, a letter, a space, a digit, a letter, and a digit (e.g, M1A 1A1)
    • United Kingdom Postal Code - 2 letters followed by 1 or 2 numbers, an optional whitespace, 1 number, and 2 letters. (e.g, WC12 3XX)
  2. Modify Register.html to check the postal code against these two new regular expressions as well as the regular expression for a US postal code.

Solution:

RegularExpressions/Solutions/FormValidation.js
//	Regular Expressions
var reEmail = /^(\w+[\-\.])*\w+@(\w+\.)+[A-Za-z]+$/;
var rePassword = /^[A-Za-z\d]{6,8}$/;
var reProperName = /^([A-Z][A-Za-z']+ )*[A-Z][A-Za-z']+$/;
var reInitial = /^[A-Z]$/;
var reState = /^[A-Z]{2}$/;
var rePostalUS = /^\d{5}(\-\d{4})?$/;
var reUsername = /^[A-Za-z\d]{6,15}$/;
---- C O D E   O M I T T E D ----

Solution:

RegularExpressions/Solutions/Register.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<script type="text/javascript" src="FormValidation.js"></script>
<script type="text/javascript">

function validate(form){
	var firstName = form.FirstName.value;
	var midInitial = form.MidInit.value;
	var lastName = form.LastName.value;
	var city = form.City.value;
	var state = form.State.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 (!reProperName.test(firstName)) {
		errors[errors.length] = "You must enter a valid first name.";
	}

	if (!reInitial.test(midInitial)) {
		errors[errors.length] = "You must enter a one-letter middle initial.";
	}

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

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

	if (!reState.test(state)) {
		errors[errors.length] = "You must enter a valid state.";
	}

	if (!rePostalUS.test(zipCode)) {
		errors[errors.length] = "You must enter a valid zip code.";
	}

	if (!reUsername.test(userName)) {
		errors[errors.length] = "You must enter a valid username.";
	}
---- C O D E   O M I T T E D ----

Challenge Solution:

RegularExpressions/Solutions/FormValidation-challenge.js
//	Regular Expressions
---- C O D E   O M I T T E D ----

var rePostalUS = /^\d{5}(\-\d{4})?$/;
var rePostalCA = /^[A-Z]\d[A-Z] \d[A-Z]\d$/;
var rePostalUK = /^[A-Z]{2}[0-9]{1,2} ?[0-9]{1}[A-Z]{2}$/;
---- C O D E   O M I T T E D ----

Challenge Solution:

RegularExpressions/Solutions/Register-challenge.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<script type="text/javascript" src="FormValidation-challenge.js"></script>
<script type="text/javascript">

function validate(form){
---- C O D E   O M I T T E D ----

	if (!rePostalUS.test(zipCode)
			&& !rePostalCA.test(zipCode)
			&& !rePostalUK.test(zipCode))
	{
		errors[errors.length] = "You must enter a valid postal code.";
	}
---- C O D E   O M I T T E D ----

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