Issue 110 - Warn about required fields not being filled in in forms

[allyharrison]

Change Summary

Extends the <Form/> component so that required fields display an error if they are left empty.

Change Form

• The pull request title has an issue number
• The change works by "Smoke testing" or quick testing
• The change has tests
• The change has documentation

Other Information

The original ticket suggested including "(required)" in the label automatically, but I have excluded from this PR.

It consumes a lot of space and feels unnecessary, especially if most fields will be required anyway. Might be better to do the inverse and label non-required fields as "(optional)".

Related issue

• Resolve Show/warn about required fields not being filled in in forms #110

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
penni	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 19, 2024 4:51am

[SodaVolcano]

For the "(optional)" I was referring to the subtitles (the smaller grey text) but it can be added to the title instead. I wasn't sure if "(*)" would be better as it's shorter, but if there's no subtitle then only having "(*)" as the subtitle might look a bit weird

[SodaVolcano]

Btw is the callout centered? The text should be a bit more to the left I think. If the callout comes with padding or margin feel free to remove it (it's not used in anywhere else apart from component showcase I think so the display shouldn't break)

[SodaVolcano]

lgtm!

[ErikaKK]

Found some bug. Cannot submit the form when fill in every field