London | 26-ITP-May | Gideon Defar | Sprint 1 | Form Control#1289
London | 26-ITP-May | Gideon Defar | Sprint 1 | Form Control#1289gideondefar wants to merge 11 commits into
Conversation
✅ Deploy Preview for cyf-onboarding-module ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
| <p> | ||
| <label for="customerName">Name:</label> | ||
| <input type="text" id="customerName" name="customerName" required minlength="2" | ||
| pattern=".*\S.*" placeholder="Enter your full name"> |
There was a problem hiding this comment.
Can you change the pattern so that it can reject names like "A " or " A"? (Name with only one non-space character but with many space characters)
There was a problem hiding this comment.
name character pattern updated and tested.
| <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@example.com" | ||
| pattern="^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+([a-zA-Z]{2,63})$" | ||
| title="Please enter a valid email address (e.g., user@example.com). Domain parts (like 'example') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com)."> |
There was a problem hiding this comment.
Why specify the pattern when the input type is "email"? What difference does the pattern make?
When I tested the form, the input field still accepts "a@a" as a valid email.
There was a problem hiding this comment.
Email updated to specific pattern and tested.
| <input type="text" id="customerName" name="customerName" required minlength="3" | ||
| pattern=".*\S.*\S.*" placeholder="Enter your full name"> |
There was a problem hiding this comment.
The regular expression (value of pattern) looks good, but
if you set minlength to 3, then the input element would not accept name like "CJ".
| <p> | ||
| <label for="emailAddress">Email:</label> | ||
| <input type="email" id="emailAddress" name="emailAddress" required placeholder="you@gmail.com" | ||
| pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$" |
There was a problem hiding this comment.
This regular expression is relatively advanced. If someone asked your what it means, can you explain what it means?

Learners, PR Template
Self checklist
Changelist
I created a form control in HTML and checked the accessibility.