On mobile, Form Validation Error doesn't show if the required field is not visible on the screen

On mobile, when there is a required field that isn’t completed/selected, and it is out of screen view, (so you’ve scrolled past it and are clicking a submit button on the bottom of the page). What happens is that it pops up the keyboard, even if it isn’t a keyboard entry field that’s required. If the field is in view, it does show the validation error. It works on desktop (Mac browser), not on mobile (iOS Chrome/Safari). Here are screenshots:

Here the keyboard pops up after I click on the “continue pre-order” button:

What it should show is that the user needs to select one of these buttons (comfortably snug or tighter fit) - you can see there is no error message:

If the missing field entry IS on the screen, it does show the error:

On desktop browsers, it does show the error message for the missing button (so it’s working, just not on mobile when it’s off screen):

I tried both browser native and in-line, same issue.

Hey Suzan, we made an update so the keyboard doesn’t appear anymore on button group errors. I’m seeing that the error does appear though, even when scrolled down

Thanks Peter, the keyboard is gone, but the error message still isn’t showing up for me. My guess is that it actually is showing up, but that scrolling back up makes the error disappear before the buttons are in view, this is based on what I’m seeing on the iPad. On the iPad, in portrait mode, I can just see the bottom of the button group and it does show the error message, the moment I touch the screen to scroll up it disappears. If I turn the iPad to landscape view, I never see the error message.

These are other things I tested on two iPhones:

  • Also, if one of the buttons (comfortable/tighter fit) isn’t selected, then it doesn’t show the error message for the next blank field even if that field is visible on the screen.

  • If I DO select one of the buttons (comfortable/tighter fit) and then leave the next fields blank, when I click the “continue pre-order” button, it does what you would expect:

  1. it scrolls up to the first blank field, arm circumference, shows “this field is required” and pops up the keyboard (as it should)
  2. then it goes to the next blank field, underbust circumference, and shows “field is required” message, with the keyboard pop-up (as it should)
  3. then it goes to the gender dropdown and shows “this field is required” but no keyboard pop-up since it is a dropdown (as it should)

(The only difference between the button group and the other error messages is that for the button group I created a custom validation error).

I’m on the latest iOS, on 2 iPhones (13 mini and a 15) cleared history, in Safari. I am testing it directly on the form.feathery.io site (not embedded)

I believe that’s what’s happening as well. However, when i tested it, the form autoscrolls to the button group field to display the error when it triggers.

Hi Peter, here is the link to a screen recording: https://photos.app.goo.gl/ueYWaJoNErZXmmzC9

I pressed the button once, waited a few seconds, then pressed it twice more, then manually scrolled back up. The button is mostly covered by the form name overlay but you can see it changes color after I press it to a darker red. No validation error message, and it doesn’t automatically scroll back up to the missing field.

Hi Peter - following up on this one too, I’m still having this issue on both Safari and Chrome on mobile. Thank you

I’m still not able to reproduce it on android chrome mobile hmm. It makes it difficult for us to debug

Do you see it in iOS Safari? I only have iOS devices…

Checking in on this? Going to just uncheck “required” for now. Thanks.