Description
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link href="styles.css" rel="stylesheet"/>
<script src="trim.js" type="text/javascript"></script>
<script src="javascript.js" type="text/javascript" > </script>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="schedule.html">Schedule</a></li>
</ul>
</div>
<h1>Sign up Form</h1>
<p>If you wish to play on our team, Kenton Winn will get back to you.</p>
<div id="content-wrapper">
<form name="yourChar" id="yourChar" action="http://faculty.edumedia.ca/jarvisa/forms/valid.php" method="get">
<div class="box">
<label for="charName">Name:</label>
<input type="text" id="charName" class="charField txt" name="charName" />
<div class="fieldInfo">
Please enter your name.
</div>
</div>
<br />
<div class="box2">
<label for="city">City:</label>
<input type="text" id="city" class="city txt" name="city" />
<div class="fieldInfo">
Please enter your City.
</div>
</div>
<br />
<div class="box2">
<label for="email">E-mail:</label>
<input type="text" id="email" class="email txt" name="email" />
<div class="fieldInfo">
Please enter your email.
</div>
</div>
<br />
<div class="box2">
<label for="number">Phone Number:</label>
<input type="text" id="number" class="number txt" name="number" />
<div class="fieldInfo">
Please enter your phone number
</div>
</div>
<div class="formbox">
<input type="submit" id="btnSubmit" name="btnSubmit" class="button" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
window.onload = awesome;
//declare globals
var theForm;
function awesome(){
//onclick for submit button
document.querySelector("#btnSubmit").onclick = processForm;
//onblur functions for text fields
document.querySelector("#charName").onblur = checkName;
document.querySelector("#email").onblur = checkEmail;
document.querySelector("#number").onblur = checkNumber;
//get the whole form
theForm = document.querySelector("#yourChar");
}
//function that processes the information in the form
function processForm(){
//set an error message variable
var msg = "";
//validate the name!
//call the function that handles name validation (it will return true if there
//was an error)
msg = checkName();
//validate the email!
msg = checkEmail();
//validate the number;
msg = checkNumber();
var beer = true;
var glass = new Array();
glass.push(checkName());
glass.push(checkEmail());
for (var i = 0; i < glass.length; i++){
if(glass[i] == false){
beer=false;
}
}
if ( ! beer ){
return false;
}else{
return true;
}
}
//check the name field
function checkName(){
//rules: cannot be less than 2 characters or more than 50
// cannot have numbers
var namefield = document.querySelector("#charName");
var msg="";
var spaces=false;
var numbers=false;
var counter=0;
var words=false;
var beer=true;
var name = theForm.charName.value; //loop through the value of the entire field, looking for numbers and spaces 11 //trim removes leading and trailing spaces name = trim(name);
//loop through the value of the entire field, looking for numbers and spaces
//also count the number of characters between spaces
for(var q=0;q<namefield.value.length;q++){
//if a space is found (after trimming) set the spaces variable to true
if(namefield.value.substring(q,q+1)==" "){
spaces = true;
//since we've found a space, there should be more than one word (provided you have used the trim function)
if(counter<2){
//if the counter is less than 2, then the word that came before the space has less than 2 characters in it
words = true;
}
//reset the counter (-1 so when we count up below it starts again at 0)
counter = -1;
}else if(isNaN(namefield.value.substring(q,q+1))==false){
//isNaN returns false if you find a number
numbers = true;
}
//for each character, count up by 1
counter += 1;
}
//after the loop, check the values of the variables
if(numbers == true){
msg+= "No Numbers!";
}
if(spaces == false){
msg+= "More than one word please!\n";
}
if(words == true){
msg += "Words must have more than one character!\n";
}
//|| (double pipeline) is 'or'
if(name.length < 2 || name.length > 50){
msg += "Name must be between 2 and 50 characters. ";
}
//check for an error message
if(msg != ""){
theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="error">' + msg + '</span>';
//have the form return true for the play button
return false; //fail
}else{
theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="correct">A good, strong name.</span>';
return beer;
}
}
//check the email
function checkEmail(){
//rules: must have @ symbol, must have . after @
// only one @ symbol, at least one .
// the last . must be at least two characters from the end
// the @ cannot be the first character
var email = theForm.email.value;
//get the positions of various things in the email
var firstAt = email.indexOf("@");
var lastAt = email.lastIndexOf("@");
var firstDot = email.indexOf(".");
var lastDot = email.lastIndexOf(".");
var wrongEmail = true;
//check for @ symbol (can't be first, must be only one)
if(firstAt == 0 || firstAt == -1 || firstAt != lastAt){
//firstAt == 0: @ is the first character
//firstAt == -1: no @ symbol found
//firstAt != lastAt: more than one @
wrongEmail = false; //fail
}
//check for . symbol (must be at least 1, 1 must come after last @,
//must be at least 2 characters after last .
if(firstDot == -1 || lastDot < lastAt || (lastDot >= email.length-2) ){
//firstDot == -1: no . found
//lastDot < lastAt: no . after @
//lastDot >= email.length-2: less than 2 characters after last dot
wrongEmail = false; //fail
}
//check for email error found
if(! wrongEmail){
theForm.email.parentNode.childNodes[5].innerHTML = '<span class="error">Please enter a valid email address.</span>';
return wrongEmail;
}else{
theForm.email.parentNode.childNodes[5].innerHTML = '<span class="correct">What a lovely email.</span>';
return wrongEmail;
}
}
function checkNumber(){
var subjectString = theForm.number.value;
var regexObj = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (regexObj.test(subjectString)) {
var formattedPhoneNumber = subjectString.replace(regexObj, "($1) $2-$3");
theForm.number.value = formattedPhoneNumber;
theForm.number.parentNode.childNodes[5].innerHTML = '<span class="correct">Thank you for the phone number.</span>';
} else {
theForm.number.value = '';
theForm.number.parentNode.childNodes[5].innerHTML = '<span class="error">Incorrect phone number.</span>';
}
}
// Invalid phone number
// JavaScript Document
function trim( theString ){
//clear the leading spaces
while( theString.length> 0 && (theString.substr(0, 1) == " " || theString.substr(0,1) == "\t" || theString.substr(0,1) == "\r" || theString.substr(0,1) == "\n") ){
theString = theString.substr(1);
//the string is now equal to itself starting from the second character to the end.
}
//clear the trailing spaces
while( theString.length> 0 && (theString.substr(theString.length-1, 1) == " " || theString.substr(theString.length-1,1) == "\t" || theString.substr(theString.length-1,1) == "\r" || theString.substr(theString.length-1,1) == "\n") ){
theString = theString.substr(0, theString.length-1);
//the string is now equal to itself starting from the first character to one character before the end.
}
//now we can send back the cleaned string
return theString;
}
Explanation & Answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact</title>
<link href="styles.css" rel="stylesheet"/>
<script src="trim.js" type="text/javascript"></script>
<script src="javascript.js" type="text/javascript" > </script>
<script type="text/javascript">
var theForm;
function awesome(){
//onclick for submit button
document.querySelector("#btnSubmit").onclick = processForm;
//onblur functions for text fields
document.querySelector("#charName").onblur = checkName;
document.querySelector("#email").onblur = checkEmail;
document.querySelector("#number").onblur = checkNumber;
//get the whole form
theForm = document.querySelector("#yourForm");
}
function processForm(){
//set an error message variable
var msg = "";
//validate the name!
//call the function that handles name validation (it will return true if there
//was an error)
msg = checkName();
//validate the email!
msg = checkEmail();
//validate the number;
msg = checkNumber();
var beer = true;
var glass = new Array();
glass.push(checkName());
glass.push(checkEmail());
glass.push(checkNumber());
for (var i = 0; i < glass.length; i++){
if(glass[i] == false){
beer=false;
}
}
if ( ! beer ){
return false;
}else{
return true;
}
alert(beer);
}
function checkName(){
//rules: cannot be less than 2 characters or more than 50
// cannot have numbers
theForm = document.querySelector("#yourForm");
var namefield = document.querySelector("#charName");
var msg="";
var spaces=false;
var numbers="false";
var counter=0;
var words=false;
var beer=true;
var name = theForm.charName.value; //loop through the value of the entire field, looking for
name = trim(name);
//loop through the value of the entire field, looking for numbers and spaces
//also count the number of characters between spaces
for(var q=0;q<name.length;q++){
//if a space is found (after trimming) set the spaces variable to true
if(namefield.value.substring(q,q+1)==" "){
spaces = true;
//since we've found a space, there should be more than one word (provided you have used the
// trim function)
if(counter<2){
//if the counter is less than 2, then the word that came before the space has less than 2
//characters in it
words = true;
}
//reset the counter (-1 so when we count up below it starts again at 0)
counter = -1;
}
else if(isNaN(namefield.value.substring(q,q+1))==false){
//isNaN returns false if you find a number
numbers = true;
}
//for each character, count up by 1
counter += 1;
}
//after the loop, check the values of the variables
if(numbers == true){
msg+= "No Numbers!";
}
if(spaces == false){
msg+= "More than one word please!\n";
}
if(words == true){
msg += "Words must have more than one character!\n";
}
//|| (double pipeline) is 'or'
if(name.length < 2 || name.length > 50){
msg += "Name must be between 2 and 50 characters. ";
}
//check for an error message
if(msg != ""){
theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="error">' + msg +
'</span>';
//have the form return true for the play button
return false; //fail
}else{
theForm.charName.parentNode.childNodes[5].innerHTML = '<span class="correct">A good,strong name.</span>';
return beer;
}
}
function trim( theString ){
//clear the leading spaces
while( theString.length> 0 && (theString.substr(0, 1) == " " || theString.substr(0,1) == "\t" ||
theString.substr(0,1) == "\r" || theString.substr(0,1) == "\n") ){
theString = theString.substr(1);
//the string is now equal to itself starting from the second character to the end.
}
//clear the trailing spaces
while( theString.length> 0 && (theString.substr(theString.length-1, 1) == " " || theString.substr
(theString.length-1,1) == "\t" || theString.substr(theString.length-1,1) == "\r" || theString.substr
(theString.length-1,1) == "\n") ){
theString = theString.substr(0, theString.length-1);
//the string is now equal to itself starting from the first character to one character before the
//end.
}
//now we can send back the cleaned string
return theString;
}
function checkNumber(){
theForm = document.querySelector("#yourForm");
var subjectString = theForm.number.value;
var regexObj = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (regexObj.test(subjectString)) {
var formattedPhoneNumber = subjectString.replace(regexObj, "($1) $2-$3");
theForm.number.value = formattedPhoneNumber;
theForm.number.parentNode.childNodes[5].innerHTML = '<span class="correct">Thank you for the phone number</span>';
} else {
theForm.number.value = '';
theForm.number.parentNode.childNodes[5].innerHTML = '<span class="error">Incorrect phone number.</span>';
}
}
function checkEmail(){
theForm = document.querySelector("#yourForm");
//rules: must have @ symbol, must have . after @
// only one @ symbol, at least one .
// the last . must be at least two characters from the end
// the @ cannot be the first character
var email = theForm.email.value;
//get the positions of various things in the email
var firstAt = email.indexOf("@");
var lastAt = email.lastIndexOf("@");
var firstDot = email.indexOf(".");
var lastDot = email.lastIndexOf(".");
var wrongEmail = true;
//check for @ symbol (can't be first, must be only one)
if(firstAt == 0 || firstAt == -1 || firstAt != lastAt){
//firstAt == 0: @ is the first character
//firstAt == -1: no @ symbol found
//firstAt != lastAt: more than one @
wrongEmail = false; //fail
}
//check for . symbol (must be at least 1, 1 must come after last @,
//must be at least 2 characters after last .
if(firstDot == -1 || lastDot < lastAt || (lastDot >= email.length-2) ){
//firstDot == -1: no . found
//lastDot < lastAt: no . after @
//lastDot >= email.length-2: less than 2 characters after last dot
wrongEmail = false; //fail
}
//check for email error found
if(! wrongEmail){
theForm.email.parentNode.childNodes[5].innerHTML = '<span class="error">Please enter a valid email address.</span>';
return wrongEmail;
}else{
theForm.email.parentNode.childNodes[5].innerHTML = '<span class="correct">What a lovely email.</span>';
return wrongEmail;
}
}
function checkNumber(){
theForm = document.querySelector("#yourForm");
var subjectString = theForm.number.value;
var wrongNumber = true;
var regexObj = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (regexObj.test(subjectString)) {
var formattedPhoneNumber = subjectString.replace(regexObj, "($1) $2-$3");
theForm.number.value = formattedPhoneNumber;
theForm.number.parentNode.childNodes[5].innerHTML = '<span class="correct">Thank you for the phone number.</span>';
wrongNumber = true;
} else {
theForm.number.value = '';
theForm.number.parentNode.childNodes[5].innerHTML = '<span class="error">Incorrect phone number.</span>';
wrongNumber=false;
}
return wrongNumber;
}
</script>
</head>
<body onsubmit="return processForm();">
<div id="wrapper">
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="schedule.html">Schedule</a></li>
</ul>
</div>
<h1>Sign up Form</h1>
<p>If you wish to play on our team, Kenton Winn will get back to you.</p>
<div id="content-wrapper">
<form name="yourForm" id="yourForm"
action="http://faculty.edumedia.ca/jarvisa/forms/valid.php" method="get" onsubmit="return processForm();">
<div class="box">
<label for="charName">Name:</label>
<input type="text" id="charName" class="charField txt" name="charName" onblur="checkName()" />
<div class="fieldInfo">
Please enter your name.
</div>
</div>
<br />
<div class="box2">
<label for="city">City:</label>
<input type="text" id="city" class="city txt" name="city" onblur="checkName()" />
<div class="fieldInfo">
Please enter your City.
</div>
</div>
<br />
<div class="box2" >
<label for="email">E-mail:</label>
<input type="text" id="email" class="email" name="email" onblur="checkEmail()" />
<div class="fieldInfo">
Please enter your email.
</div>
</div>
<br />
<div class="box2">
<label for="number">Phone Number:</label>
<input type="text" id="number" class="number" name="number" onblur="checkNumber()"/>
<div class="fieldInfo">
Please enter your phone number
</div>
</div>
<div class="formbox">
<input type="submit" id="btnSubmit" name="btnSubmit" class="button" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
