Phone Number field doesn't validate correctly if Country option is disabled

[svondervoort]

Describe the bug

When the Country option is enabled and you enter only alphabetic characters the validation returns Invalid number.
When the Country option is disabled and you enter only alphabetic characters the validation is valid for some reason.

Steps to reproduce

1. Create a form with a PhoneNumber field
2. On the PhoneNumber field keep Country disabled
3. Enter alphabetic characters
4. Submit form

Form settings

• Multi-page form: No
• Submission Method: Page Reload
• Client-side Validation: Yes
• Custom Form Templates: No

Craft CMS version

5.6.1

Plugin version

3.0.19

Multi-site?

No

Additional context

No response

[engram-design]

We've been intentional about validation for the Phone Number field, as phone numbers can be notoriously tricky to validate. In particular, out of the previous form libraries we used before Formie came along, this was a massive pain.

When the Country option is enabled, we use client-side validation, that requires a country to be selected. This is the intl-tel-input library. This cannot work without a country option, and cannot be used to validate just plain numbers without the context of a country - rightly so.

I don't want to go down the road of implementing our own client-side logic when not picking a country. While alphabetic characters would seemingly be invalid, they're not always. We need to handle special characters like + and -, and probably allow alias numbers like 1800 CALL ME. I'm sure there's other cases I'm not considering.

Which leaves us to possibly looking to implement the libphonenumber library (that intl-tel-input uses) server-side. I'm hesitant to introduce that in a patch release, so as not to disrupt current users with potentially breaking validation for phone numbers.

Open to other suggestions of course.

[svondervoort]

I understand the situation.

Adding the possibility of manually setting a regex for validation would also be great. Or would that be possible by setting a pattern using the Advanced - Input Attributes?

[engram-design]

I did consider Regex, but in Formie's mission to be a client-friendly as possible, it seemed a bit "advanced". But yes, in the Input Attributes you can add pattern and that should work just fine!