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

**URL:** <https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139>\
**Category:** Support\
**Created:** [October 6, 2023, 8:40pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139 "2023-10-06T20:40:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![szollar](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/szollar/32/34_2.png) [@szollar](https://community.feathery.io/u/szollar)\
**Post date:** [October 6, 2023, 8:40pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/1 "2023-10-06T20:40:10Z")

</div>

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:

 ![IMG_0198.PNG](https://canada1.discourse-cdn.com/flex030/uploads/feathery/original/1X/6a507602b86257e77986d963c8c598981782a672.jpeg)

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:

 ![IMG_0199.PNG](https://canada1.discourse-cdn.com/flex030/uploads/feathery/original/1X/f5e8c171ddede3b448869ebe3e1447e9987ddc35.jpeg)

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

 ![IMG_0200.PNG](https://canada1.discourse-cdn.com/flex030/uploads/feathery/original/1X/e1db86c5a622148f23aae17b1dce46b862347aab.jpeg)

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):

 ![Screen Shot 2023-10-06 at 1.29.36 PM](https://canada1.discourse-cdn.com/flex030/uploads/feathery/original/1X/7f2adb379a3878208ea71f92061ab49d42b186a6.png)

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

---

<div class="post-metadata">

**Author:** ![peter](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/peter/32/7_2.png) [@peter](https://community.feathery.io/u/peter)\
**Post date:** [October 6, 2023, 9:35pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/2 "2023-10-06T21:35:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![szollar](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/szollar/32/34_2.png) [@szollar](https://community.feathery.io/u/szollar)\
**Post date:** [October 6, 2023, 11:25pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/3 "2023-10-06T23:25:56Z")

</div>

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](http://form.feathery.io) site (not embedded)

---

<div class="post-metadata">

**Author:** ![peter](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/peter/32/7_2.png) [@peter](https://community.feathery.io/u/peter)\
**Post date:** [October 7, 2023, 7:06am UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/4 "2023-10-07T07:06:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![szollar](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/szollar/32/34_2.png) [@szollar](https://community.feathery.io/u/szollar)\
**Post date:** [October 7, 2023, 9:18pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/5 "2023-10-07T21:18:49Z")

</div>

Hi Peter, here is the link to a screen recording: [https://photos.app.goo.gl/ueYWaJoNErZXmmzC9](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.

---

<div class="post-metadata">

**Author:** ![szollar](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/szollar/32/34_2.png) [@szollar](https://community.feathery.io/u/szollar)\
**Post date:** [October 11, 2023, 2:58pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/6 "2023-10-11T14:58:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![peter](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/peter/32/7_2.png) [@peter](https://community.feathery.io/u/peter)\
**Post date:** [October 12, 2023, 4:32pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/7 "2023-10-12T16:32:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![szollar](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/szollar/32/34_2.png) [@szollar](https://community.feathery.io/u/szollar)\
**Post date:** [October 12, 2023, 4:50pm UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/8 "2023-10-12T16:50:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![szollar](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.feathery.io/szollar/32/34_2.png) [@szollar](https://community.feathery.io/u/szollar)\
**Post date:** [October 17, 2023, 1:40am UTC](https://community.feathery.io/t/on-mobile-form-validation-error-doesnt-show-if-the-required-field-is-not-visible-on-the-screen/139/9 "2023-10-17T01:40:29Z")

</div>

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