Last active
December 23, 2015 07:09
-
-
Save dennispipper/6598911 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Join Email List</title> | |
<!--From Murach's JavaScript and jQuery --> | |
<!--http://murach.com/books/qury/index.htm --> | |
<style type="text/css"> | |
/* type selectors */ | |
article, aside, figure, footer, header, nav, section { | |
display: block; | |
} | |
body { font-family: Arial, Helvetica, sans-serif;background-color: white;margin: 0 auto;width: 650px;border: 3px solid blue; | |
} | |
h1 { | |
color: blue; | |
} | |
section { | |
padding: 0 2em 1em; | |
} | |
label { | |
float: left;width: 11em;text-align: right; | |
} | |
input { | |
margin-left: 1em;margin-bottom: .5em; | |
} | |
span { | |
color: red; | |
} | |
</style> | |
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<script type="text/javascript"> | |
var $ = function (id) { | |
return document.getElementById(id); | |
} | |
/* state code lookup to verify states that gets it | |
value from the user, only 9 included, but could be 50 | |
the function then converts the entry into Uppercase if the user enters lowercase. | |
The for loop then compares the user entry with the array of states | |
If the entry is equal to one of the 9 listed, then it returns true and the function ends | |
Otherwise the for loop ends and returns false and the function ends */ | |
stateCodeLookup = function (stateCode) { | |
var states = ["CA", "WA", "OR", "NV", "NM", "AZ", "WY", "MT", "UT"]; | |
stateCode = stateCode.toUpperCase(); | |
for (var i in states) { | |
if (states[i] == stateCode) { | |
return true; | |
} | |
} | |
return false; | |
} | |
//this function gets the entries that user inputs from the form fields and stores them in the variables | |
var joinList = function () { | |
var emailAddress1 = $("email_address1").value; | |
var emailAddress2 = $("email_address2").value; | |
var isValid = true; | |
// validate the first email address and make sure something is entered in the text fields | |
if (emailAddress1 == "") { | |
$("email_address1_error").firstChild.nodeValue = "This field is required."; | |
isValid = false; | |
} else { | |
$("email_address1_error").firstChild.nodeValue = ""; | |
} | |
// validate the second email address and make sure that the text field matches emailaddress1 | |
// and also makes sure there is text in the field | |
if (emailAddress2 == "") { | |
$("email_address2_error").firstChild.nodeValue = "This field is required."; | |
isValid = false; | |
} else if (emailAddress1 !== emailAddress2) { | |
$("email_address2_error").firstChild.nodeValue = "This entry must equal first entry."; | |
isValid = false; | |
} else { | |
$("email_address2_error").firstChild.nodeValue = ""; | |
} | |
// validate the first name entry, testing for user input | |
if ($("first_name").value == "") { | |
$("first_name_error").firstChild.nodeValue = "This field is required."; | |
isValid = false; | |
} | |
else { | |
$("first_name_error").firstChild.nodeValue = ""; | |
} | |
// validate the state code entry & testing for user input | |
var stateCode = $("state_code").value; | |
if (!stateCodeLookup(stateCode)) { | |
$("state_code_error").firstChild.nodeValue = "State code is invalid."; | |
isValid = false; | |
} | |
else { | |
$("state_code_error").firstChild.nodeValue = ""; | |
} | |
// submit the form if all entries are valid | |
// the name/id of the form is 'email_form' | |
if (isValid) { | |
$("email_form").submit(); | |
} | |
} | |
/* Window load event handler to set focus on the email address field and the onclick event for the button in the form */ | |
window.onload = function () { | |
$("join_list").onclick = joinList; | |
$("email_address1").focus(); | |
} | |
</script> | |
</head> | |
<body> | |
<section> | |
<h1>Please join our email list</h1> | |
<form id="email_form" name="email_form" action="join.html" method="get"> | |
<label for="email_address1">Email Address:</label> | |
<input type="text" id="email_address1" name="email_address1"> | |
<span id="email_address1_error">*</span><br> | |
<label for="email_address2">Re-enter Email Address:</label> | |
<input type="text" id="email_address2" name="email_address2"> | |
<span id="email_address2_error">*</span><br> | |
<label for="first_name">First Name:</label> | |
<input type="text" id="first_name" name="first_name"> | |
<span id="first_name_error">*</span><br> | |
<label for="state_code">State Code:</label> | |
<input type="text" id="state_code" name="state_code"> | |
<span id="state_code_error">*</span><br> | |
<label> </label> | |
<input type="button" id="join_list" value="Join our List"> | |
</form> | |
</section> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Edited the comments and cleaned up some code to make it more usable and hopefully understandable ;)