Voter Application Phase 2

Objectives

• Convert a form to be sticky form.
• Use PHP to access and process HTML form data server-side.

PHP Assignment 01

Download the file voter_application.txt.

Change the file name and extension to voter_application_lastname.php, where lastname is your last name and php is the file extension.

• Ensure you have file extensions enabled in your operating system to correctly change and verify the file extension.

Before making changes in Atom, it is important to remember to program in pieces. Do not try to sticky all the inputs at once. Make one input sticky, ensure it works, then move on to the next. The same applies to the error messages. As long as you program in pieces, when you do run into issues, it will help narrow down the debugging process to the newly introduced code. Doing too much without testing will make the debug process that much harder. If you find that the page doesn't load at all, then remove the code that you last added, then slowly re-introduce code to find what it is that is preventing the page from loading.

In Atom, make the following changes to voter_application_lastname.php:

• Sections I and II are sticky.
  • The checkbox for Use same as Mailing Address does not function, but the checkbox itself should still be sticky.
• In PHP, apply a regex pattern to validate the State ID Number so that it only accepts input in the pattern:
  • Starts with an uppercase S, followed by 8 uppercase letters or digits.
  • Example: SA1234567, S12345678, S55555555, SABCDEFGH, S1A2B3C4D
• If the State ID Number does not pass the validation, do the following:
  • Format the label for "idNum" by adding a class attribute with the value ".error"
  • After the State ID Number input, add an in-line error message with the text: State ID Number must start with an uppercase S, followed by 8 uppercase letters or digits.
  • Format the in-line error message with the same ".error" class attribute as the label.
• In PHP, apply a regex pattern to validate the Contact Phone so that it 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
  • Note about your regex: If you will be using back references in your regex, use single quotes when defining your regex pattern instead of double-quotes, otherwise you will need to escape the \.
    • For instance, use '/ /' instead of "/ /"
    • Within double-quotes, \1 does not mean back reference of group 1, otherwise you will need to do \\1
• If the Contact Phone does not pass the validation, do the following:
  • Format the label for "phone" by adding a class attribute with the value ".error"
  • After the Contact Phone input, add an in-line error message with the text: Please enter a phone number in the form 000-000-0000 or 0000000000.
  • Format the in-line error message with the same ".error" class attribute as the label.
• Use PHP to validate that the user checked the affirmation checkbox in Section III.
  • If the user did not check the affirmation, format the label for "affirm" by adding a class attribute with the value ".error"
• Comment all PHP code.
  • Be sure to add your name as an author at the top.
  • You do not need to add a description of the page at the top.

voter_application.txt

< !doctype html >
< html >
< head >
< meta charset="utf-8" >
< title >Voter Registration Application< /title >
< !-- PHP Assignment 01 -- >
< !-- Modified version of HI Voter Application -- >
< !-- Modified by: Ed Meyer -- >
< link type="text/css" href="https://laulima.hawaii.edu/x/SCbYv6" rel="stylesheet" >
< style >
.error {
color: #A00;
font-weight: bold;
}
< /style >
< /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 >
< label for="idNum" >1. State ID Number:< /label >
< input type="text" name="idNum" id="idNum" value="" > < br >
< label for="dob" >2. Date of Birth (mm/dd/yyyy):< /label >
< input type="date" name="dob" id="dob" value="" > < br >
3. Last Name: < input type="text" name="lastname" id="lastname" value="" >
First Name: < input type="text" name="firstname" id="firstname" value="" >
Middle, Suffix: < input type="text" name="initial" id="initial" value="" > < br >
4. Mailing Address: < br >
Address Line 1: < input type="text" id="address1" name="address1" value="" > < br >
Address Line 2: < input type="text" id="address2" name="address2" value="" > < br >
City: < input type="text" id="city" name="city" value="" >
State: < input type="text" id="state" name="state" value="" >
ZIP Code: < input type="text" id="zip" name="zip" value="" >< 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" value="" > < br >
Address Line 2: < input type="text" id="resAddress2" name="resAddress2" value="" > < br >
City: < input type="text" id="resCity" name="resCity" value="" >
State: < input type="text" id="resState" name="resState" value="" >
ZIP Code: < input type="text" id="resZip" name="resZip" value="" >< br >
< label for="phone" >6. Contact Phone:< /label >
< input type="text" id="phone" name="phone" value="" >

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

< label for="affirm" >< 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.< /label >
< 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 >
< /div >
< /body >
< /html >