Magento2 : How can i scroll up to first input error validation message on checkout

by Raluca Albu   Last Updated August 14, 2019 14:09 PM

I saw some simillar questions, but they wanted to remove this feature. They suggested to comment some code in MAGENTO_ROOT/vendor/magento/magento2-base/lib/web/mage/validation.js file

if (firstActive.length) {
                $('html, body').animate({
                    scrollTop: firstActive.offset().top

the part with animate, but actually in my vendor file this code was not there. So i added in my file since I want this feature. But nothing happens, when continue button on checkout is pressed and I have errors in form, the body doesn't scroll to the invalid input. On desktop it's ok, but on mobile, the user might never see the error.

I've also tried to put in my JavaScript file, some custom code, some jquery, when the button is clicked. I thought initial that it doesn't work because the button is already having the onclick event from magento files, from knockout. But i think that my jquery is not working because the element are not there, and the functions is triggered before the html elements load in dom.

enter image description here

Related Questions

Magento 2 EE Checkout Page not working (JS error)

Updated June 28, 2017 09:09 AM

Customize the list of shipping methods - With JS?

Updated January 11, 2018 21:09 PM