CountryInput and StateInput use CustomControlSelect, which doesn't support a required prop

[Aljullu]

Currently, there is no way to mark Country and State input fields as required, but we would like to do so in the Checkout form. That's because internally they use Gutenberg's <CustomControlSelect>, which can't handle required cases.

[mikejolley]

I'm not sure this issue actually affects us @Aljullu @nerrad Whilst it's true we cannot add a HTML required prop to this field, won't we have validation in place using the Store Notices?

HTML required attributes don't provide a consistent experience across browsers and can easily be bypassed with a little inspector knowledge. I think we need JS based validation on the address fields.

[mikejolley]

There is no issue I can find for validating fields?

[nerrad]

HTML required attributes don't provide a consistent experience across browsers and can easily be bypassed with a little inspector knowledge. I think we need JS based validation on the address fields.

Agreed, and it's notable that MDN has no browser compatibility data for this attribute

There is no issue I can find for validating fields?

No, but it is something that will come up as a part of splitting out work from #1780 (*see the notes in the flowchart). Still, it'd be good to create an issue so it's not missed.

[mikejolley]

@garymurray Flagging this up with you - I don't think I've seen any designs for field validation, and whilst we have notices, it might not be the best solution. e.g. we could add inline validation.

[nerrad]

I think Gary already did some designs and shared them (but it might have only been in slack) - I'll see if I can find.

[nerrad]

Okay so this is what was shared by Gary in slack: https://www.figma.com/file/Pfw5Qa1UOw03RiJere3Wlo/Automattic-Components?node-id=4117%3A16532

Related slack convo: p1582022324322700-slack-C8X6Q7XQU

[garymurray]

@mikejolley yes - the idea was to use inline validation as per those components @nerrad shared above.