iOS Mobile Safari not scrolling to invalid field

[pensierinmusica]

Hi,

As mentioned in #878 I noticed that Parsley is not scrolling the screen properly to show the first error on iOS Mobile Safari (obviously for the issue to be visible, the form needs to be long enough so that the error is outside of the viewport).

From a UI/UX perspective this is pretty bad, because the user clicks on "submit", nothing happens, and the error is not shown.

Any idea how to fix this? Thanks!

[pensierinmusica]

Btw, in case it's useful, this is a workaround used for jQuery-validate: http://stackoverflow.com/questions/9417171/jquery-validation-not-working-on-iphone

$("foo").validate({
  invalidHandler: function(e, validator) {
    if(window.navigator.userAgent.match(/iphone/i)) {
      window.setTimeout(function() {
        $("html,body").animate({
          scrollTop: $(validator.errorList[0].element).offset().top
        });
      }, 0);
    }
  }
});

[dannyobrian]

Based on the code sample from the jQuery-validate workaround above I solved the problem with this function attached to the form:validate event

window.Parsley.on( 'form:validate', function (form) {
    if (!form.isValid()) {
        for (var n = 0; n < form.fields.length; n++) {
            if (form.fields[n].validationResult !== true) {
                if(window.navigator.userAgent.match(/iphone|ipad/i)) {
                    window.setTimeout(function() {
                        $("html,body").animate({
                            scrollTop: $(form.fields[n].$element[0]).offset().top
                        });
                    }, 0);
                }
                break;
            }
        }
    }
});

[marcandre]

Can someone provide me with a particular example, iOS version and device? I tried our simple form example in the iOS Simulator (iPad Air / iOS 8.2), leaving the name empty and filling everything else correctly, and when I pressed validate it scrolled the name into view correctly. The only iOS device I have is an original iPad that is stuck in an ancient OS, so I can't really test any other way than with the simulator... (gifts accepted though lol ;-) )

[F1sn1k]

@marcandre I use phone emaulator from google chrome developer edition ( select iphone 5 and 6) and it works fine. When I try on real iPhone 5 and iPhone 6 it is not working.

OS: iOS 9+

[marcandre]

@F1sn1k thanks. Are you using the simple form example as I described? Does it not scroll, or does it lock up like some others are reporting?

[F1sn1k]

@marcandre No I use my custom application

[MethodGrab]

I just tested the simple form example on my iPhone 6 (iOS 9.3.1) and it scrolls to the middle of the hobbies list every time I press validate.

It does however focus on the correct field, so if I start typing it then scrolls to the first name field.

It also zooms in a bit which is probably because the input font size is less than 16px (can't check on my phone).

[erik127]

I see the same on an ipad mini. I added two screenshots, one before and one after validate. What happens is the same as mentioned above. The textbox does get focus, hence the keyboard, but it is not visible as there's no scrolling to the field. scrolling the page manually still works.

If I fill in the textboxes, but not the radios, then nothing happens visually. Apart from the fact that the form moves down a bit as the error message on top pushes it down.

i use an iPad mini with 9.2.1.

[ProgrammerZ]

Same problem with 9.3.2 & 7.1.2. It tries to scroll to submit button itself. The most strange is that if you press "Go" - it works, but not via regular button press.

[marcandre]

I'm sorry for the troubles you're having... I don't have a modern iOS device to test this on. It also looks like a bug in Safari/iOS, no? Knowing the details of that bug would help find the best way to circumvent it...

[ProgrammerZ]

Yes, it's on Safari/iOS and also on Chrome/iOS - the same behavior.

[migu0]

Same issue here on both Chrome and Safari on my iPhone 5s with the latest OS:

Steps to reproduce:

1. Go on https://tidyme-staging-parsley.herokuapp.com/
2. Type in postcode 2000, email [email protected], mobile 0491123456
3. Press "Get a Quote"
4. Go to bottom of page and press "Next"
5. Go to bottom of page and press "Next"

There's no scrolling to the top of the page where the invalid field is.

Please let me know once you're done with testing so I can take down this additional environment, which we have to pay hosting for. Also, would be great to resolve this soon since most of our traffic is mobile and this breaks the booking process for many of our customers.

Thanks a bunch!

[marcandre]

As I mentioned, I don't have an iOS device I can use for testing... What would really help is if someone can make a minimal example, without using Parsley, whereby clicking on a button executes JS and the call to focus fails. Maybe it's only when validating? Maybe it's only when some DOM has been added (error message)? Then (or directly), we have to figure out if the issue has been reported to Apple. Also, is jQuery aware of the issue and can they circumvent it?