Lab 3

JavaScript Basics

Form Styling & Validation

---

Lab Setup

Download append.html to your own lab3 folder, i.e., csis390/labs/lab3

---

1. Creating and Appending Elements

1. Open append.html in Chrome. Note that it has a label and input text field.
2. Open append.html in Notepad++ and notice how the label and input text field are created using JavaScript.
3. Add JavaScript code to create a div, label and input field for entering Birthday and then append it into the form.
   Do not add HTML, instead add JavaScript code to generate the elements.
4. Use type="date" for the input element.
5. Use "pony_birthday" as the name and id of the input element.
6. Your form should look like this:
   
7. Add embedded CSS so your form looks like this:
   
8. Hints: Give the div elements a 1px solid gray border, add border-radius, padding and margin. Make the label elements display block. Give the input elements a height of 1.6rem and a font-size of 1.1rem.

---

2. Adding Event Listeners

1. Save append.html as event.html
2. Be sure to open event.html in you web browser.
   A common mistake is to edit one file, but test a different file in the web browser.
3. Add a submit button using JavaScript. Note that a submit button is just an input element where type="submit"
4. Use value="Insert" for the submit button
5. Use "action_button" as the name and id for the submit button.
6. Your form should look like this:
   
7. Add the following event listener code to the very bottom of your JavaScript code (but still inside the script tag):
   ponyForm.addEventListener("submit", checkForm);
8. Add the following function definition at the very top of your JavaScript code (but still inside the script tag):
   

     function checkForm(event) {
       alert("Submitting form");
     }

9. Save event.html and re-open/refresh it in Chrome.
10. When you click the submit button. An alert window should pop up and if you click "OK" then the form will be submitted.
11. Add more embedded CSS so your submit button looks like this:
    
12. Hints: To select only the submit button used the advanced selector input[type~="submit"] and give it a height of 2.5rem and a lightgreen background-color. Add padding, border, border-radius, and box-shadow to approximate the image above.
13. Add the following JavaScript code at the very bottom to create a hover effect on the submit button:
    
    While we could have used CSS to achieve the same hover effect, this code illustrates how the CSS is implemented by web browsers.
14. Important: In the code above this refers to the submit button. In general, this can be used to refer to the object that is the "subject" of the event. Rather than define separate functions for changing the submit button, we use an anonymous function because the function won't be reused. To learn more about the code you just added, read about:
    DOM Events Anonymous Functions

TASK CHECK

Verify that event.html validates at: html5.validator.nu
Show your instructor that the hover effect works, that the alert pops up and that the form submits properly.

---

3. Validating User Input

1. Save event.html as valid.html
2. Be sure to open valid.html in you web browser.
   I want you to get into the habit of making sure you are editing the same document that you are testing. This is one of the most common problems when encountering bugs you cannot fix. It is because you are not editing the file with the bugs.
3. Add code to the checkForm function to make sure the Name is not blank, and to make sure the birthday year is valid. For testing purposes, a valid birthday year should be between 2000 and 2015.
4. Your finished form should work like this: valid.html
5. Note that I have minified (compressed) the JavaScript to obfuscate the solution. You cannot just copy and paste this JavaScript. You must write it yourself with meaningful variable names and proper indenting.

Hints & Help:

• Chapter 4 in the zyBook is a JavaScript tutorial/reference. You can use it to learn about the syntax of the language.
• All your code goes inside of the checkForm function
• You can select elements using a CSS-like query selector:
  var ponyNameElement = document.querySelector("#pony_name");
• You can get the submitted value and save it to a variable:
  var submittedName = ponyNameElement.value;
• JavaScript if statements are just like Java:
  

    if (submittedName == "") {
      // The name is blank
    }

• You can prevent the form from being submitted by calling this method:
  event.preventDefault();
• You can modify the CSS of a selected element:
  ponyNameElement.style.border = '5px solid red';
• You can modify the CSS of a selected element's parent:
  ponyNameElement.parentNode.style.color = 'red';
  Note that this would the pony name's div.
• You can select the label by using parent-child relationships and change the innerHTML to be the error message.
  ponyNameElement.parentNode.firstChild.innerHTML = "Name is required"
  Note that this would the first label tag inside the pony name's div.
• You can use an if-else statement to switch the style back if the value is valid:

    if (submittedName == "") {
      ponyNameElement.style.border = '5px solid red'; 	   		
    }
    else {
      ponyNameElement.style.border = "1px solid gray"; 	   			   
    }

• You can get the value of the submitted birthday, which is a String:
  var birthdayString = ponyBirthdayElement.value;
• This string is of the form 2017-1-30. You can split it into an array using the "-" as a delimiter
  var birthdayArray = birthdayString.split("-");
• You can compare the year as follows
  if (birthdayArray[0] < 2000)