Add client-side validation on phone paragraph type field in Drupal

[laflannery]

Description

Currently the phone paragraph type field has some validation but adding client-side validation would provide a better user experience by providing the editor with immediate feedback when there is an error.

Can we add client-side validation for the following scenarios:

• Phone number field
  • Invalid format
  • Invalid length
  • Invalid characters
• Extension number field
  • Invalid characters

Additional context

The CMS has implemented client-side validation on the alt text field but does not yet have documentation on this (we don't think). We may need to talk to Edmund to understand what is available and how to implement this.

Acceptance Criteria

• [ ] Client-side validation has been added for all scenarios
• [ ] QA has been done on multiple instances of this field
• [ ] Requires design review
• [ ] Requires accessibility review

[laflannery]

@Agile6MSkinner - Part of the broken up Phone validation ticket

[davidmpickett]

@jilladams @Agile6MSkinner @mmiddaugh Noting that this ticket has a heavy dependence on the CMS Platform team. Have we initiated any cross-team communication to let them know that we have a use case for Client-Side Validation and are blocked until they provide documentation for product teams?

[Agile6MSkinner]

I have not and am not up to speed on the channel/process for that. @jilladams do you mind partnering on that with me?

[jilladams]

This is a new angle on client-side validation. The implementation that the CMS team did to allow client-side vaildation for alt text has a known issue, documented in https://github.com/department-of-veterans-affairs/va.gov-cms/issues/17896

During PR testing, we found that when the Clientside validation module is enabled (as it is on Prod), validation doesn't work as expected. For "conditionally required" fields, we have to require them on the client side. This means we rely on javascript to set the required property on such fields, and then the browser's native validation kicks in automatically to prevent submission of empty, required input fields. It is that native validation that is being short-circuited by Clientside Validation, somehow. There are several conditional field requirements on Events. (Client-side validation is required because Drupal isn't aware of conditional requirements.)

The problem is present for all required fields on the Events edit form (not the Event create form though, interestingly) if the Clientside Validation module is enabled (or configured to affect all Drupal forms as it is set in prod)

Per Edmund, Clientside validation should only be enabled for 2 image forms where alt text exists, so at some point new config got imported that turned it on for all forms.

Which seems to mean that right now in prod:

• Client-side validation should already be available on the forms we care about for this ticket, bc it's on for all forms right now
• When #17896 resolves, it won't be anymore, and we'll need to specify the relevant forms since they won't be covered by the big blanket any longer
• We'll need to understand how conditional fields work in this context

I bumped that ticket to let them know there's another related use case, and to ask about the potential to prioritize that fix: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/17896#issuecomment-2239540555

[Agile6MSkinner]

Hey team! Please add your planning poker estimate with Zenhub @jv-agile6 @dsasser @omahane @davidmpickett