Commerce checkout form all pane errors to be displayed on top of form

Question

I am using latest commerce module with D7 site. By default commerce displays form errors inside individual commerce checkout form panes. This is designed by default and every pane has it's own validation callback. So this is different from Drupal's form API error displaying.

Is it possible to display them at the top of the form, same as Drupal form API does it? Does form_set_error works well for all checkout form elements and they get error class? (it seems to not work for me).

Answer 1

As Ryan mentioned, it's difficult to change that behaviour server-side, however you could move the error messages to the top of the page with JavaScript instead.

e.g

style.css

/* Hide checkout messages by default to show with JS later */
body.page-checkout .messages{
  display:none;
}

script.js

Drupal.behaviors.moveCheckoutMessages = function (context) {
  $('body.page-checkout form .messages', context).each(function () {
    $('.region-content').prepend($(this));
    $(this).css({"display":"block"});
  });
}

A client-side approach like that should work.

Answer 2

Given the way we developed the checkout form as a composite of checkout pane "sub forms", it isn't possible to change the way we're trapping and displaying error messages. You would need to create a drop-in replacement for the checkout form.