Checkout user experience improvement: Inform users of invalid above the fold

[ClarkeV]

Hi Guys,

I would like to request a new improvement for the checkout. Currently users could have trouble finding out about invalid fields which disappear above the screen fold.

Scenario:

1. User fills out his address information
2. Scrolls down below to submit the form and go to the next step.
3. Hey! The button is not working. Weird...

When the invalid fields are not visible because they are above the fold, the end user is not notified of the problems with his information. In some cases the user may be smart enough to scroll up and see if there are invalid fields, but you may understand that not every user is thinking about doing that.

Possible solution

1. Automatically scroll to the first invalid field on the page
2. Notification message below the submit form to inform the user that he has to fill out his invalid forms.

I am curious about what you guys think of this user experience issue.

Cheers,

Clarke

[jarhody]

This is a serious issue. I could not figure out why I could not checkout in some instances (button not responding).

Have you posted this on Github?

[ClarkeV]

Thank you for your understandings. I will post this on Github, good idea!

I hope there will be a solution soon. 

[jarhody]

I posted it on Github today!

[Andrii Holovan]

Hi,

Due to 2.1.7 still does not have ability to focus on invalid input fields on Checkout I've extended 'Magento_Checkout/js/view/shipping' component in custom module.

Here is the code:

define([
        'jquery',
        'underscore',
        'Magento_Checkout/js/view/shipping'
    ], function ($, _, Component) {
        'use strict';
        return Component.extend({
            validateShippingInformation: function () {
                var result = this._super();

                function onErrorFocus(errorElement) {
                    if (typeof errorElement !== 'undefined') {
                        var windowHeight = $(window).height();
                        $('html, body').animate({
                            scrollTop: errorElement.cumulativeOffset().top - windowHeight / 3
                        });
                    }
                }

                if (result === false) {
                    var errorElement = $("div[class*='mage-error']:visible")[0];
                    onErrorFocus(errorElement);
                } 

                return result;
            }
        });
    }
);

It scrolls shipping page up to the error or warning message. Something similar could be done on payment step also.

[Rohit Kashyap]

Hello Clarke,

Have you thought about the One Page Checkout Process? By having all the steps and forms fields on a single page. With this approach, the customers can fill in all the information and view the invalid input entries as well.

Please check Magento 2 One Step Checkout by Webkul. 

Customers can view the invalid info like for incorrect email - http://prntscr.com/v2tkee, or address, city, zipcode, phone, etc.

Thanks,

Rohit.

[kuldeep_sharma]

Hello Clarke,

Please check this Magento 2 One Step Checkout by Magedelight, it might be helpful for your problem.

Thanks