Javascript validation

Programming
Tutor: None Selected Time limit: 3 Days

<!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;
}
 

Nov 30th, -0001

<!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>

Jun 14th, 2013

I am not sure what you did but none of my fields validate now.

Jun 14th, 2013

Hi this is the working file for you. Once again.

 


 

<!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 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="correct">' + 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>

Jun 14th, 2013

Studypool's Notebank makes it easy to buy and sell old notes, study guides, reviews, etc.
Click to visit
The Notebank
...
Nov 30th, -0001
...
Nov 30th, -0001
Dec 11th, 2016
check_circle
Mark as Final Answer
check_circle
Unmark as Final Answer
check_circle
Final Answer

Secure Information

Content will be erased after question is completed.

check_circle
Final Answer