cancel
Showing results for 
Search instead for 
Did you mean: 

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

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

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

 

screenshots-checkout-notification.png

4 Comments
New Contributor

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?

Senior Member

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

I hope there will be a solution soon. 

New Contributor
I posted it on Github today!
M1 Certified

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.