MIS 7375 – Homework 3
Nikki Safarova | April 17, 2026
What the Form Does
The MediForm Patient Registration Form is a fully client-side web application that collects
and validates the information a new patient would provide when registering at a medical clinic.
The form is organized into four sections: Patient Information,
Patient Contact Information, Reason for Visit, and
Create Account.
Every field is validated in JavaScript — both in real time as the user types and again when
the Validate button is clicked. Required fields are marked with a red asterisk. Error messages
appear directly beneath each field and are pre-reserved in the layout so the page never jumps
when a message appears or disappears. The Submit button is hidden until every field passes
validation. Clicking Submit navigates to a thank-you confirmation page.
Fields collected include: full name, gender, date of birth, SSN (obscured),
address, email, phone, visit reason checkboxes, symptom description, urgency slider,
vaccination and insurance status, and a user ID with password.
What I Am Particularly Happy With
-
Real-time validation with no page jumps.
Every field validates on each keystroke and on blur. Error divs have a fixed
min-height so the layout stays stable when messages appear or clear.
-
Auto-formatting fields.
The SSN field automatically inserts dashes after the 3rd and 5th digit as you type
(e.g.
123-45-6789). The phone field formats to ###-###-####
the same way. Both feel natural and reduce user errors.
-
Validate → Submit gating.
The Submit button is hidden by default and only revealed after every single validator
returns true. If the user edits any field after passing validation, Submit hides again
automatically. Enter-key submission is also blocked by an
onsubmit guard.
-
Password strength meter.
A color-coded animated bar (Weak / Medium / Strong) appears below the password field
as the user types, giving instant feedback without waiting for a validation error.
-
Password security checks.
The password cannot match or contain the user's ID, first name, or last name. It requires
at least one uppercase letter, one lowercase letter, and one digit.
-
Review panel with PASS/ERROR status.
Clicking the Review button displays a full summary of all entered data with color-coded
PASS/ERROR badges for every required field — including gender, SSN (masked), vaccinated,
and insurance status which are easy to miss.
-
Symptoms character counter.
The textarea tracks characters in real time (0 / 500) and turns red when approaching
the limit, preventing oversized submissions.
What I Did Not Yet Get Fully Working
-
Deprecated HTML tags.
The form table still uses the
<center> tag for layout centering,
which is deprecated in modern HTML. This should be replaced with CSS
margin: auto.
-
Server-side validation.
All validation is client-side JavaScript only. A real medical registration system would
require server-side validation to prevent tampered or bypassed submissions, as well as
secure storage of sensitive data like SSN.