Applying the pattern attribute on iOS makes expirationDate trigger HTML5 validation on submit

[jegtnes]

General information

• SDK version: 3.34.0
• Environment: Sandbox, probably also production
• Browser and OS: iPad iOS 11 Safari—probably also earlier versions

Issue description

Hey there, folks!

Braintree seems to selectively apply pattern=[0-9] to numeric input elements on iOS, presumably to bring up the numeric keypad.

This is sensible—but a small side-effect this causes is that if you're on an iPad, the numeric keypad includes a "Return" key, which will attempt to submit a form. If you've entered a full expiration date, this will technically invalidate the pattern attribute, which doesn't expect the forward slash, and causes an error, which could be quite confusing, as the user-facing "requested format" is definitely met. See this example from one of your CodePen example integrations—the same issue is occurring in a project I'm working on currently.

This is possibly something you can overcome by also including a novalidate attribute on the containing form. This is normally quite a heavy-handed approach, but considering each hosted field is inside its own iframe with its own form—I can't immediately think of a downside to doing this.

I was wondering if this is something you've come across earlier or if there's a way to configure Hosted Fields to apply the novalidate attribute to the parent form element?

Thank you for your time. :)

[crookedneighbor]

At first glance, I think it could be reasonable to add novalidate to all the hosted fields, since the validation is done by hosted fields itself already without the assistance of HTML5's built in validation.

Thanks for the report, we'll look into this.

[jegtnes]

@crookedneighbor That would seem sensible. Thank you for investigating! Appreciate it.

[crookedneighbor]

This should be fixed in version 3.34.1.