Medical Form Website

I am building on assignments from the past 2 medical forms I created. I have to use github to enter the information and submit it I think. Please review the insturctions and how to submit:

Per our last class… here are the changes/recommendations…

Building on the work you have already done on Assignment 2….
Basically this is the SAME THING as assignment 2 EXCEPT edits need to be done on the fly and not just judged with HTML pattern matches. It needs to have significant Javascript edits in it for MOST of the fields.

Some of you already used javascript for the edits rather than HTML element attributes, so hopefully this will not be much work for you.

Edits on the fly: You need to employ Javascript to validate and Warn the user if they do anything wrong in any of the fields AS THEY ENTER or LEAVE the field and AGAIN before they press the SUBMIT button. All the requirements of Homework 1 and 2 in terms of validation need to now be done with Javascript.
You can leave in the HTML checks, like MINLENGTH and PATTERNS, but you need to write a javascript version of a check for those conditions. This is a MUCH better technique for warning the user when they make mistakes (or when they are not giving you what you want).
Bottom Line… DO NOT wait to do validation until a submit button is pressed.

Leave the warnings/error messages on the page while there are errors and REMOVE the error messages IF the user corrects the info in that field.
Also, if you weren’t already doing this, make sure they have plenty of prompting as to your requirements for that element, using attributes like prompt and title.

Just in case you are still making local files:
The content must be hosted somewhere, either on Github, an Oracle acount you set up OR an AWS or some other online account such as W3Spaces. You must give me the URL to go grade and NOT just zip up and upload the files to Canvas.
IF you were never able to set up a public site that I could access, you need to let me know so I can try to get you a public account so you can FTP your files there. I host several public sites.

The html file should be named homework3.html ( do not obliterate your old homework files and do not put your student ID in the file name anymore.) It is not critical that you name it this, but it is a good idea… the important thing is that you share the correct URL to the html file you want to start from. I do not need links to the CSS and JS files.

Remember all the requirements of homework 1:

MANDATORY: Make an EXTERNAL css file to refer to in your html document.

MANDATORY: Make an external javascript file(s) and reference your scripts in the original HTML page

Required Text boxes:

First Name (1 to 30 characters. ADVANCED EDITING: Letters, apostrophes and dashes only)
Middle Initial ( optional, 1 character, no numbers, blank/null ok)
Last Name (1 to 30 characters, ADVANCED EDITING: Letters, apostrophes and dashes only)
Date of Birth (3 pieces, MM/DD/YYYY) ADVANCED EDITING: must validate the date range, and nothing in the ftuture or more than 120 years ago)
Social Security (Do not use your real social when testing, must be 9 digits,ADVANCED EDITING: peformat as you type, i.e. stick in the dashes once 3 characters are typed). Alternatively, this can be an “id” number or come up with some reason to be asking for a 9 digit number, which should be obscured like the password field, but the field needs to be validated to have only numbers in it.
Address Line 1 (required,2 to 30 characters)
Address Line 2 (not required, but if entered, 2 to 30 characters)
City (required, 2 to 30 characters)
State (Give them a dropdown box with all 50 states, DC and PR in it including a NULL entry and NO default. Insert an Options list Snippet you find on the Internet)

Zip Code… .required, 5 digits only
Email address (ADVANCED javascript EDITING: must be in the format name@domain.tld)

A text area to describe something.
Use the <TABLE> or other semantic tags along with the STYLE structure to space things out nicely on the sceen – DO NOT WASTE SPACE ON THE SCREEN.

You need to include the following

Check Boxes
e.g. Check all of the following that apply: Have you had Chicken Pox, Measles, Covid-19, etc… at least 5

Radio Buttons, at least 3
e.g. own or rent, unsure
e.g. Have you been vaccinated.

Slide bar, at least 1 (ADVANCED EDITING: incrementing or decrementing a value that displays as you slide it.)
e.g. make a bar that asks for desired salary from $20,000/year to $200,00/year.
For real estate, make it as if the person wants to enter a rauge of prices to pay for a home.

You need to add a text box for a desired user ID and then 2 boxes for a passsword and a re-enter password.
You will need to create Javascript to VALIDATE the user name and password with these criteria:

ADVANCED EDITING: 1. user ID Can’t start with a number
2. ID Must be at least 5 characters but no more than 20
ADVANCED EDITING: 3. ID cannot have spaces or any special characters in it, just letters, numbers, the dash and the underscore ok.
4. Password fields must be secret/hidden on the form, i.e. typing produces **** instead of the characters.
5. Passwords must be at least 8 characters long.
ADVANCED EDITING: 6. Passwords must contain at least 1 upper case, 1 lower case letter and 1 digit.
7. Password CANNOT equal your desired User ID
8. Use 2 Password fields as shown in the class example. They must, of course, equal each other.

Feel free to ADD MORE if you choose. You are just trying to convince me that you know how to use and validate the most common form elements that a user encounters in a form.

Deciding WHEN to do the validation is up to you depending on the field type, i.e. a name or a password, and long as it is done prior to having to click a button. In other words, validate on the fly with, oninput, onfocus, onblur, etc…

If the user does anything wrong, you need to display a warning next to or underneath each item that they messed up on. It would be PREFERABLE not to cause the form to “jump around” when you add or remove warnings and instructions, so you should predefine some space on your page for these messages.

Be sure to set some error flags or keep an error count (or disable the submit button) so the user can’t submit bad data.

DO NOT REMOVE but do not rely on the HTML validity edits. It may have value later, for homework 4. Belts and suspenders…

You can leave the “get data” button there if you made one in Homework 2 to redisplay all the data form without any editing. IF YOU WANT, you can
edit THAT routine to then ALSO call the javascript element validation functions and add that as another column in the output table… this would be just for debug puposes. You wouldn’t really do that in a real environment.

So…
REPLACE the traditional Submit button with a VALIDATE button which will call javascript functions to do the following:

Retrieve all the data from the form into the function (no need to redisplay it in a table unless you want to.)
Validate EVERY field, whether it is required or not (if not required and blank, you can skip it but if the user entered data in a field, it still has to be checked to make sure its not wierd characters.. use your best judgement as to what you think is weird or allowed depending on the field, i.e. names shouldn’t have anything but letters, spaces, apostrophes, etc…). Force lower case in fields like email address.

ONLY give the user an actual Submit button IF there are NO errors in any of the entered data on the form.

The submit button will load a NEW html page that says: Thank you for your submission. We will be contacting you shortly.

YOUR DELIVERABLES in Canvas WILL BE

Click on Text Submission

part 1:
Tell me the SPECIFIC URL to go to to see your work, i.e. profjake.w3spaces.com/MIS3371/homework3.html
Tell me the theme you chose.

part 2:
Give me a synopsis of what your website/form is supposed to be doing.
Describe to me what you are particularly happy with that you got working.
Also tell me what you DIDN’T YET get working.

You will be graded on BOTH the quality and detail of your answers as well as the actual presentation and funcationality of the page.

If you prefer, you can write a document and share it on One Drive so you can be more detailed and even include screenshots…. At least 100 words but not a ‘BOOK”.

part 3:
In the Text Submission, insert a text document or PDF of the pseudocode or N0S Diagram you came up with, at least for the VALIDATE button so I can see your flow of logic to determine whether or not all the fields were good. There is an icon when writing the text to do thos. OR you can also just share the link from One Drive.

You can go look at my examples at profjake.w3spaces.com but just keep in mind, some of that code is intentionally broken.

RUBRIC:

Graded item	Max points/item
Submitted URL correctly	5
Synposis or pseudocode	5
Turned anything in?	2
Turned in on time	2
Files named properly	2
Review/get data button	2
review info accurate/working	2
Title attribute/context sensitive instructions	2
element input regex patterns	2
javascript required	3
error messages in the right location and make sense	3
Name fields edited	3
date range check	3
social edited/obscured	3
email validated	3
phone validated (if present)	3
address validated	3
Slide bar shows dynamic value	3
user id edited	3
password validation on the fly	5
2 password boxes compared	3
Edits with javascript?	20
Dynamic checks	5
Leave errors on the page	3
Prompting	5
CSS used significantly and in external file	5

================================================================================================================
End of Homework 3. I will attach what I have submitted for assignment 1 and 2.

Assignment 1 Github Pages-

Data Dictionary-

Diagram-

Assignment 2 Github github link-

then i have attached over assignment 2 documents for you to review. Please review answers 1 and 2 to complete assignment 3.

WRITE MY PAPER