Javascript validation

Anonymous
timer Asked: Jun 6th, 2013
account_balance_wallet $5

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

Tutor Answer

codershelp
School: UIUC

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

flag Report DMCA
Review

Anonymous
Good stuff. Would use again.

Similar Questions
Hot Questions
Related Tags
Study Guides

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors