On phones you can't always see required field error messages. So if you tap the submit button it will look like it's just sitting there because the error message is off screen. What is the best way to handle this?
Would it be okay if I scrolled to the error message so that it was visible? If So should I animate the scroll or just jump right to it?
Here is an example of what I'm talking about:
I'm going to add a bit emphasis and expand a bit on Stephen's previous post.
I would say most certainly scroll to the first erroneous field and message. This allows the user to not have to scroll back up looking for the error message (which can also lead them to miss additional errors and can sometimes be easy to miss). It also requires them to scroll back down to the bottom of the page and potentially run into any additional errors. I've also user tested this on desktop and it's very effective so would recommend it for that as well.
For a slightly less jarring experience a error summary indicating the number of errors is also useful at the top of the page (sometimes error validation requires a page refresh) or near the submit button. User can the click this button and anchor to the first of such errors. I've played with the idea of listing all the errors in the summary in the past but you quickly run into the issue of it turning into a big mess especially on mobile. I haven't tested this vs just scrolling to it but I usually feel this is just a bit excessive.
Lastly, I would say DEFINITELY use the animated scroll. I've been in many user testing sessions where majority of users look and become very confused when a page just jumps somewhere. Animations are also very easy to implement these days so there's generally very little reason not to do this.
Scroll up to it (have an animation take it to the top of the page). Display the errors and also make sure you have contextual errors, because the user might not remember what was needed to be filled.
download bmml source – Wireframes created with Balsamiq Mockups
I would say that moving the viewport to the first validation message would be a good idea on mobile.
You could alternatively use an approach similar to the anchor links in the optimised version on this article - http://www.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/
The errors overview could be placed near the submit button on mobile possibly, then when someone clicks the anchor, they are taken to the offending field.
As far as the animation goes, that's probably more of a style choice really, my vote would be scrolling as it always feel more connected.
Another option in addition to these two answers, is to use a notification.
Notifications are becoming more prevalent in mobile usage - swiping down from the top to view a notification, a small notification appearing on your screen, or a large module box notification appearing on your screen are all iOS options.
Something similar could easily be used. The issue might arise when having more than one notification to show. I recommend looking at competitors. John Lewis screenshot of their notification below which I've done for you (and no - that's not my address ;)!) Interesting they shoot the user back to the top of this page where this summary exists
