Magento – How to scroll to first error in Magento 1.9 product page

form-validationmagento-1.9prototype-jsvalidation

Hi guys I would like to scroll to the first erroneous input on the product page. Currently it doesn't and stays at the bottom.

You then have to manually scroll up till you see the swatch option group that is not selected. So, no visual cue to show at bottom.

I tried to run a on DOMNodeInserted function to see if it has class validation-advice. And if so run the scroll to element.

Didn't works as expected.

So would anyone how know to edit the validation script bottom of product view page in rwd theme or validation.js in magento-root/js/varien/prototype to scroll to the first input/ swatch where this is required is shown.

UPDATE:

Using the answer below I attempted to scroll to the first error (First element element without swatch select).

But, it doesn't work, as previous validation is still being used thus add to cart has to be pressed twice, logically working one step back.

console.log(jQuery(".validation-advice:not([style])"));

Using this line I logged the following:

console log for error

Showing that first submit returns no element, even though on purpose iv'e selected no swatches, so every option has error. Second submit picks up the error elements. Then I have chosen a swatch for the first option and pressed add to cart again, still it hasn't picked up that the first element no longer has error, the second submit picks it up. This trend continues throughout.

Is the else in the wrong place ?

Best Answer

Edit product template: /app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view.phtml

find: 

<script type="text/javascript">
    //<![CDATA[
        var productAddToCartForm = new VarienForm('product_addtocart_form');
        productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                try {
                    this.form.submit();
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }

                if (button && button != 'undefined') {
                    button.disabled = true;
                }
            } 
        }.bind(productAddToCartForm);

add

else {
      // do what you need to do e.g. scrollTop();
      // or scroll to id
      }

before 

}.bind(productAddToCartForm);

Complete code

<script type="text/javascript">
    //<![CDATA[
        var productAddToCartForm = new VarienForm('product_addtocart_form');
        productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                try {
                    this.form.submit();
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }

                if (button && button != 'undefined') {
                    button.disabled = true;
                }
            } else {
                // do what you need to do e.g. scrollTop();
            }
        }.bind(productAddToCartForm);

That's all.

[Edit]

To achieve what you need just add before productAddToCartForm.submit 

var myFormValidation = new Validation('product_addtocart_form');
//watch for select change
    $j(".super-attribute-select").on("change", function() {
    // check if .validation-failed class exist to prevent form validation before user click add to cart
    if ($j('.validation-failed').length ) {
          if ( !myFormValidation.validate()) {
            //form not validated,do your scroll stuff here.
           } else {
            //form is validated. remove this else if not needed
          }

    }
    });
Related Topic