Sheffield | 26-ITP-January | Martha Ogunbiyi | Sprint 2 | Form Controls #978
Conversation
…t email validation
…s the required alt meaninigful
…tual color selection
…ed to avoid accidental checking
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
marthak1
added
the
Needs Review
cjyuan
left a comment
cjyuan
left a comment
There was a problem hiding this comment.
-
Lighthouse score is 93/100.
- Reason: Touch targets do not have sufficient size or spacing.
-
Consider aligning the wording used in the legend so similar items are described consistently. This helps users understand the information more quickly.
Customer Details
T-Shirt Color Preference
Choose Your T-Shirt Size
- In the PR description, to create list items in Markdown, we need to leave a space between
-and the text.
| <input type="text" id="name" name="name" minlength="3" maxlength="15" autocomplete="name" | ||
| placeholder="enter your name" required> |
There was a problem hiding this comment.
Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?
There was a problem hiding this comment.
Thank for pointing this out. I hadn't considered that scenario.
| <input type="email" id="email" name="email" autocomplete="email" placeholder="enter your email" | ||
| pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required> |
There was a problem hiding this comment.
Why use pattern in <input type="email">?
Browsers can already perform built-in email validation.
There was a problem hiding this comment.
The regex pattern was used intentionally to enforce stricter email validation. This compliments native browser validation. It's like a defence in depth approach.
cjyuan
added
Reviewed
2 participants
Learners, PR Template
Self checklist
Changelist
Summary
This project demonstrates basic HTML form validation
Changes
-added fields to enter customer details
-added fields to select T-shirt colour
-added fields to pick a size
-ensured input validation
References
Sprint 2 Backlog – Task: Form Controls