London | 26-ITP-Jan | Johnny Vargas | Sprint 2 | Form-Controls

[JohnnyBoyV]

Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

Added form to collect the user's name, email, desired colour of t-shirt and size.
It validates the information that is submitted into it and all fields are required as requested.
Changed footer to my name.

Questions

None at this time.

[netlify]

✅ Deploy Preview for cyf-onboarding-module ready!

Name	Link
🔨 Latest commit	8eeca9e
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/697e0cb845c0f10008037e31
😎 Deploy Preview	https://deploy-preview-1029--cyf-onboarding-module.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	2 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 83 (🔴 down 3 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[cjyuan]

Codes looks great.

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?

[JohnnyBoyV]

@cjyuan Thank you for the review. I have made the change, is it good now?

[JohnnyBoyV]

I believe the current validation error is due to #1099 and is not my fault?

[cjyuan]

Changes look good. With that pattern, can a user enter a name with one letter follows by one space? (Just checking your understanding, no change needed)

[JohnnyBoyV]

@cjyuan Thanks again!

And yes, they can since ".*\S.*" is only looking for it only being spaces and a space is a character so 1 character plus 1 space clears the 2 character minimum validation.
I could fix it by instead using regex "pattern="(?:\S.*){2,}""

I understand no change was needed but I did it anyway and seems to work well on my end.

[cjyuan]

Good work. The next challenge would be to understand the meaning of the regular expression (?:\S.*){2,} and also take times to learn regular expressions. You will likely need to use it very often in the future.

To further improve the accessibility and user friendliness on the form, we can provide a custom description of the rule imposed on the input field (e.g., name must contains at least two letters). Without this custom message, the browser will only show something like "Please match the requested format".

I am just suggesting possible directions. No change needed.