In this exercise you will be adding Javascript validation to the forms exercise you worked on in Exercise 06. To make the validation more aesthetically pleasing, you will use javascript change the both the HTML within a <div> tag as well as change the CSS class the <div> is using.

What you are creating:

Image of empty form, just loaded in the browser: example 1
Image of empty form after clicking submit: example 2
Image of form partially filled out: example 3
Image showing invalid zip code: example 4
Image showing invalid email: example 5
Image showing form correctly filled out: example 6

XHTML:

This assignment is case sensitive. Be mindful of what you type.
Copy your form page from EC06 and save it as "index.html" for this exercise.
Make sure your EC06 is complete and functioning correctly before beginning this exercise.
After the <h1>, add a <div> tag with an id of: "feedbackDiv" and class equal to: "green"
- This <div> will contain all the error messages from the form validation.
Add (optional) text next to Address2 - not everybody has two lines of address.
Remove the "reset" button and associated CSS. We will not use it for this exercise.
Make sure every element in the form has an id and a name attribute - You will be using the the id and/or name of each tag for JavaScript validation
Make sure the textarea has _nothing_ between the opening and closing tags: <textarea .... ></textarea>
Finally, in the opening <form> tag, add the following code that will call a function that you will create below in the JavaScript section.
- onsubmit="return validate();"

CSS:

Create an external style sheet called "mystyles.css"
Add a link tag to index.html that points to mystyles.css
Cut the internal CSS out of index.html and paste it into mystyles.css (and delete the <style> tags)
Create a reference to a named div: #feedbackDiv
- font-family: Arial, Helvetica, sans-serif
- font-size: 14px
- text-align: center
- padding: 4px
- position:absolute
- top:100px
- left:560px
- width:350px
- height:auto
Create a class: red
- color: #ff0000
- border: 1px solid #ff0000
- background-color: #ffccff
Create a class: green
- color: #00cc00
- border: 1px solid #00cc00
- background-color: #ccffcc

JavaScript:

JavaScript is case sensitive... be mindful of what you type.
When you add JavaScript, if the browser says it has restricted ActiveX controls, Click to 'Allow Blocked Content...'
Create a new JavaScript (JS) file and name it "validate.js"
- The very first line in the JS file should be: 
- Everything else you add goes in between those.
In between the <head> tags of index.html, add a <script> tag that points to this external JavaScript file:
- <script type="text/javascript" src="validate.js"></script>
Add the following function, clearOnLoad(), to the JS file
- Purpose: clear the error field (feedbackDiv) when the page first loads or if the page is refreshed
  function clearOnLoad()
  {
  document.getElementById("feedbackDiv").className = "";
  document.getElementById("feedbackDiv").innerHTML = " ";
  }
Now, in index.html, immediately before the closing body tag, call this function
- Why does this code go near the end of the document? Because if it is placed above the feedbackDiv, then as the page loads line by line in the browser, the browser would try to clear the feedbackDiv before it exists. For this reason, this function call must go towards the end of the document.
- Purpose: again, the same as above - to clear the feedbackDiv when the page first loads, or if the page is refreshed.
  <script language="javascript">
  clearOnLoad();
  </script>
  </body>
Add the following function, addLineBreak(), to the JS file
- Purpose: to add a line break to the error code that appears in feedbackDiv so that each error appears on its own line. This is repetitive code, so it is best to pull it out into a function and call the function.
- NOTE: the use of the not operator ! before the word document. The not operator ! changes whatever is to its right to the opposite. True becomes false. False becomes true.
  function addLineBreak()
  {
  //add a line break, if needed
  if(!document.getElementById("feedbackDiv").innerHTML == "")
  document.getElementById("feedbackDiv").innerHTML += "<br />";
  }
Add the following function, validate(), to the JS file
- Purpose: function that holds all the validation for the form. This function is called by using the onsubmit= attribute of the <form> tag.
  function validate()
  {
  
  //temporary fix - remove this after you add the last piece of javascript
  return false;
  //end of portion to remove after adding the last piece of javascript
  } //end function validate
Now, inside the validate() function:
- The first two lines should be as follows. errorsInForm specifies exactly that. If it is true, there are errors in the form. If it is false, there are no errors in the form. The variable is used later in an if statement to set the feedbackDiv to either red or green. The second line executes when the submit button is first pressed, emptying the feedbackDiv.
  var errorsInForm = false;
  document.getElementById("feedbackDiv").innerHTML = "";
- Text boxes: FirstName, LastName, Address1, City
  - Address2 is optional, therefore we do not have validation for it.
  - Email and Zip are special cases that we will do extra validation for later.
  - Purpose: check to see if the text box is empty. If it is empty, add an error message to the feedbackDiv
  - You will need four if statements like this, the text in bold changes for each if statement.
    if(document.getElementById("FirstName").value == "")
    {
    //The text box is empty, set errorsInForm to true
    errorsInForm = true;
    
    //Call the addLineBreak function which will add a <br/> tag before the error message, if needed
    addLineBreak();
    
    //Add an error message to the feedbackDiv
    document.getElementById("feedbackDiv").innerHTML += "Please enter a value for: First Name";
    }
- Zip Code text box:
  - First, check to see if the text box is empty (same as above), Second check to see if the text box contains only numeric data
  - NOTE: in JavaScript, you can use isNaN (is not a number) to find out whether a text value only contains numbers.
  - For this text box, use an else if, that way only one error message for zip code appears at a time.
    if(document.getElementById("Zip").value == "")
    {
    //Zip text box is empty
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please enter a value for: Zip Code";
    }
    else if(isNaN(document.getElementById("Zip").value))
    {
    //The Zip code that was entered contains something other than numbers
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please enter a valid Zip Code";
    }
- Email text box:
  - First, check to see if the text box is empty.
  - Second, check to see if there is an @ sign.
  - Third, check to make sure the @ sign is not the first character.
  - Fourth, check to make sure the @ sign is not the last character.
  - Fifth, check for a period at the end followed by 2, 3, or 4 characters.
  - The bold items below are places where you will have to add the appropriate code.
  - NOTE: indexOf() is used to find the index of a particular character. Given the text "good times", the index of "o" would be 1. Remember that you start counting from 0 in JavaScript.
  - NOTE: lastIndexOf() is the same as indexOf(), except it starts counting from the end of the string.
  - NOTE: length is used to find the length of a string. Given the text "bad times", the length would be 8, again starting from 0 and counting the space.
  - For this text box, use an else if, that way only one error message for zip code appears at a time.
    if(document.getElementById("Email").value == "")
    {
    //nothing was typed, error
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please enter a value for: Email";
    }
    else if(document.getElementById("Email").value.indexOf("@") == -1)
    {
    //there is no @ sign, error
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please enter a valid email address.";
    }
    else if(document.getElementById("Email").value.indexOf("@") == 0)
    {
    //@ sign is the FIRST character, error
    //add the code here to take care of the error
    }
    else if(document.getElementById("Email").value.indexOf("@") == document.getElementById("Email").value.length-1)
    {
    //@ sign is the LAST character, error
    //add the code here to take care of the error
    }
    else if((document.getElementById("Email").value.lastIndexOf(".") > document.getElementById("Email").value.length-3) ||
    (document.getElementById("Email").value.lastIndexOf(".") < document.getElementById("Email").value.length-5) ||
    (document.getElementById("Email").value.lastIndexOf(".") == -1))
    {
    //there is no period . at end of email address, either 2, 3, or 4 characters must be after the period, error
    //add the code here to take care of the error
    }
- Select Drop Down boxes: State, Country
  - Purpose: check to see if the drop down box is empty. If it is empty, add an error message to the feedbackDiv
  - NOTE: with <select> drop down boxes, you must check for the selectedIndex instead of the value
  - You will need two if statements like this, the text in bold changes for each if statement.
    if(document.getElementById("State").selectedIndex == 0)
    {
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please enter a value for: State";
    }
- Checkboxes: OS
  - Purpose: looking for any one checkbox to be checked, so you start with false. If you find one checked, then you set OS_Checked to true and all is good
  - NOTE: the use of the not operator ! once again.
  - NOTE: the use of document.forms[0] (form0 is the name of the form on index.html) this time instead of getElementById
  - For checkboxes, you must loop through all of the checkboxes and check each one. For that, we use a for loop, check the length of the OS checkboxes, and access each checkbox as an array index:
    var OS_Checked = false;
    var OS_array = document.getElementsByTagName("input");
    
    for(i=0; i<OS_array.length; i++)
    {
         if(OS_array[i].getAttribute("type")=="checkbox")
         {
               if(OS_array[i].checked)
               {
                        OS_Checked = true;
               }
         }
    }
    
    if(!OS_Checked)
    {
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please select at least one operating system.";
    }
- Radio buttons: CommentType
  - The same code that we used for OS above, with a different variable:
    var CommentType_Checked = false;
    var CommentType_array = document.getElementsByTagName("input");
    
    for(i=0; i<CommentType_array.length; i++)
    {
          if(CommentType_array[i].getAttribute("type")=="radio")
          {
                if(CommentType_array[i].checked)
                {
                      CommentType_Checked = true;
                }
          }
    }
    
    if(!CommentType_Checked)
    {
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please select a comment type.";
    }
- Textarea: Comments
  - Same logic as text boxes:
    if(document.getElementById("Comment").value == "")
    {
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please provide us with some comments.";
    }
- File: FileName
  - Same logic as text boxes:
    if(document.getElementById("FileName").value == "")
    {
    errorsInForm = true;
    addLineBreak();
    document.getElementById("feedbackDiv").innerHTML += "Please select a file to upload.";
    }
- Finally, determining whether the feedbackDiv should be red or green
  - If there were errors in the form, set to red, otherwise, set to green
  - The 'return false' tells the browser not to navigate away.
  - NOTE: you are using JavaScript to change the CSS class that is applied to the feedbackDiv
    if(errorsInForm == true)
    {
    document.getElementById("feedbackDiv").className = "red";
    return false;
    }
    else
    {
    document.getElementById("feedbackDiv").className = "green";
    document.getElementById("feedbackDiv").innerHTML = "The form is filled out correctly.";
    
    //prevent the page from submitting so that you can see the green text
    //if you want the page to submit, comment out the one line of code below.
    return false;
    }
  - Lastly, remove this "temporary code" that was initially inside the validate function (the following code is no longer needed, delete it):
    //temporary fix - remove this after you add the last piece of javascript
    return false;
    //end of portion to remove after adding the last piece of javascript
Test your code:
- Enter nothing, click submit - Should have a red box with an error message for every field
- Enter things one by one, clicking submit each time - each error message should disappear one by one
- Enter an invalid zip code, then enter a valid zip code
- Enter an invalid email, then enter a valid email
- Enter everything correctly - Should have a green box

Exercise Specifications