Voter Application Phase 1

Objectives

• Work with HTML forms.
• Use JavaScript to validate data entry and provide feedback to the user using alerts.

Instructions

Download the HTML file HI_voter_application.html.

The HTML document contains a form that is an adaptation of Hawaii's voter registration application. The form is separated into 3 sections. You will be adding a submit event to the form to perform form validations as well as adding a click event to one of the checkboxes.

Change the filename to sp22_voter_application_lastname.html, where lastname is your own last name.

Open sp22_voter_application_lastname.html in Atom to make changes and in a browser to view those changes.

• Do NOT remove or modify the existing HTML unless there is an error on the page itself that prevents you from completing the assignment.

Implement Form Validation

Take a moment to familiarize yourself with the form, it's input elements, along with the names and ids.

At the bottom of the HTML document, indicated by an HTML comment, use a script tag to import an external JavaScript file named js04-Lastname-logic.js, where Lastname is your last name.

Save sp22_voter_application_lastname.html. There will be no more modifications to this file.

Create a new file and save it as js04-Lastname-logic.js, where Lastname is your last name.

• Ensure this file is saved in the same folder as your sp22_voter_application_lastname.html file.
• This JavaScript file will contain all the Javascript for the page.

Form Validation Information

• ALL validations are performed in one submit event handler function. The validations are categorized by section, but ALL validations are performed in the one submit event handler function.
• Prevent the form from submitting if there are any errors.
• Use an alert to let the user know that there is erroneous data entry.
  • Chrome/Edge Users: Ignore the [Violation] 'submit' handler message in the browser console that occurs when the alert pops up.
  • Firefox Users: Ignore the encoding message in the browser console "The character encoding of the HTML document was not declared." It will not affect the assignment.
• If there is something wrong with the form when the user clicks on the Submit button, the alert will show. If there are multiple things wrong with the form, still only show 1 alert with 1 error. Let the user fix the error and click the Submit again. If there are more errors, then another alert with the next error should be displayed. Repeat until there are no errors and the form submits.
• This is similar to the bd-form example from the lectures.

• Add a submit event with an event object paramenter, to the voterapp form and perform the following validations:
  • Section I Validations
    • Ensure the State ID Number only accepts input in the pattern:
      • Starts with an uppercase S, followed by 8 uppercase letters or digits.
      • Example: SA1234567, S12345678, S55555555, SABCDEFGH, S1A2B3C4D
      • Alert error message: "ID Number Error: Must start with an S followed by 8 uppercase letters or digits."
    • Date of Birth cannot be blank.
      • Alert error message: "Error: Please enter your date of birth."
      • Hint: Check if the length of the value is 0.
    • Last name cannot be blank.
      • Alert error message: "Error: Last name cannot be blank."
    • First name cannot be blank.
      • Alert error message: "Error: First name cannot be blank."
    • Mailing Address Line 1 cannot be blank.
      • Alert error message: "Error: Address Line 1 cannot be blank."
    • Mailing City cannot be blank.
      • Alert error message: "Error: City cannot be blank."
    • Mailing State cannot be blank.
      • Alert error message: "Error: State cannot be blank."
    • Mailing ZIP code must be a Hawaii ZIP code that also accepts the optional 4 digit extension:
      • 5 digits that start with 967 or 968 OR 5 digits that start with 967 or 968 followed by a -, followed by 4 digits.
      • Example formats: 967XX, 968XX, 967XX-XXXX, 968XX-XXXX, where X are digits.
      • Alert error message: "Error: ZIP code is not a Hawaii ZIP code."
    • There are no validations associated with the residence address.
    • Ensure the contact phone number only accepts input in the pattern:
      • 000-000-0000 or 0000000000
      • 3 digits, followed by a -, followed by 3 digits, followed by a -, followed by 4 digits.
      • Or 10 digits
      • Example: 123-456-7890 or 1234567890
      • Alert error message: "Error: Please enter a phone number in the form 000-000-0000 or 0000000000."
  • Section II Validations
    • Ensure the user chooses an answer to the citizen question.
      • Alert error message: "Error: Please answer if you are a citizen of the United States of America."
      • Hint: Use the same approach as the Male / Female example from the bd-form.
    • Ensure the user chooses an answer to being at least 16 years of age.
      • Alert error message: "Error: Please answer if you are at least 16 years of age."
    • Ensure the user chooses an answer to being a resident of Hawaii.
      • Alert error message: "Error: Please answer if you are a resident of the State of Hawaii."
    • If the user answers No to any of the questions, alert error message: "Error: You do not qualify to register to vote."
      • In other words, if amCitizenNo is checked, or ageToVoteNo is checked, or amResidentNo is checked, then it is an error.
      • Hint: Use document.getElementById to get each of the "No" radio buttons and use the .checked property to see if it was checked.
  • Section III Validations
    • Ensure the "affirmation" checkbox is checked.
      • Alert error message: "Please check the affirmation in Section III to submit your application."
• When the form passes all validations, show an alert telling the user "Thank You! Your application will be submitted."

Behavior Information

• You will need to get the HTML element and define the event handler function for the behavior
• Be careful not to add behaviors inside the submit event handler function. You may want to add a comment noting where the code for the submit event ends so you do not define a behavior inside it.

Implement Behaviors

• Section I
  • Add a click event to the Use same as Mailing Address checkbox so that when the user checks it, the address, city, state, and ZIP from the mailing address are copied to the corresponding address, city, state, and ZIP in the residence address. Only perform the copy when the checkbox is checked. If the user unchecks the checkbox, then nothing should happen.
• Section II
  • None
• Section III
  • None

Comment all JavaScript you create.

Starter Code

< !doctype html >
< html >
< head >
< meta charset="utf-8" >
< title >Voter Registration Application< /title >
< !-- JavaScript Assignment 04 -- >
< !-- Modified version of Voter Registration Application -- >
< !-- found on the back page of the State ID Application. -- >
< link type="text/css" href="https://laulima.hawaii.edu/x/SCbYv6" rel="stylesheet" >
< /head >
< body >
< div id="container" >
< header >
< h1 >Hawaii Voter Registration Application< /h1 >
< h2 >(Modified, not for official use)< /h2 >
< /header >
< form name="voterapp" method="post" >
< strong >Section I. < /strong >Failure to complete certain items will prevent acceptance of this application.< br >
1. State ID Number: < input type="text" name="idNum" id="idNum" > < br >
2. Date of Birth (mm/dd/yyyy): < input type="date" name="dob" id="dob" > < br >
3. Last Name: < input type="text" name="lastname" id="lastname" > First Name: < input type="text" name="firstname" id="firstname" > Middle, Suffix: < input type="text" name="initial" id="initial" > < br >
4. Mailing Address: < br >
Address Line 1: < input type="text" id="address1" name="address1" > < br >
Address Line 2: < input type="text" id="address2" name="address2" > < br >
City: < input type="text" id="city" name="city" > State: < input type="text" id="state" name="state" > ZIP Code: < input type="text" id="zip" name="zip" >< br >
5. Hawaii Principal Residence Address < br >
Use same as Mailing Address: < input type="checkbox" name="useMailAddress" id="useMailAddress" > < br >
Address Line 1: < input type="text" id="resAddress1" name="resAddress1" > < br >
Address Line 2: < input type="text" id="resAddress2" name="resAddress2" > < br >
City: < input type="text" id="resCity" name="resCity" > State: < input type="text" id="resState" name="resState" > ZIP Code: < input type="text" id="resZip" name="resZip" >< br >
6. Contact Phone: < input type="text" id="phone" name="phone" > < br >

< br >

< strong >Section II.< /strong > Qualifications < br >
If you answer "No" to any of the questions below, DO NOT complete this form. < br >
Are you a citizen of the United States of America? < input type="radio" name="amCitizen" id="amCitizenYes" value="yes" > Yes < input type="radio" name="amCitizen" id="amCitizenNo" value="no" > No < br >
Are you at least 16 years of age? (Must be 18 to vote) < input type="radio" name="ageToVote" id="ageToVoteYes" value="yes" > Yes < input type="radio" name="ageToVote" id="ageToVoteNo" value="no" > No < br >
Are you a resident of the State of Hawaii? < input type="radio" name="amResident" id="amResidentYes" value="yes" > Yes < input type="radio" name="amResident" id="amResidentNo" value="no" > No < br >

< br >

< strong >Section III.< /strong > I hereby affirm that: 1) I am the person named above; and 2) all information furnished on this application is true and correct.
< input type="checkbox" id="affirm" name="affirm" value="affirmation" > < br >
< br >
< div class="center" >< input type="submit" id="submit" name="submit" value="Submit" >< /div >
< /form >
< !-- Import your js04-Lastname-logic.js file here. -- >
< /div >
< /body >
< /html >