We are often using the great powermail extension for typo3.

At the current project we have some very long forms – the user needs to scroll several “monitors” to finish.

And now we have the following problem: if one of the upper mandatory form fields isn’t completed or has an invalid form – the user does not see it and the form will not submit.
That’s why we extended the form validator with a callback function that scrolls up to the first error.

Here is the typoscript setp code we used in the template:

    page.jsFooterInline.10.100.100 = TEXT
    page.jsFooterInline.10.100.100.value (

        powermail_validator = $('.tx_powermail_pi1_form').validator($.extend({
           inputEvent: 'blur',
           grouped: true,
           singleError: false,
           onBeforeValidate: function(e, els) {               
               clearPlaceholderValue(e, els);
           },
           onBeforeFail: function(e, els, matcher) {
               setPlaceholderValue(e, els, matcher);
           }
        }, powermail_customValidatorConfiguration)).bind("onFail", function(e, els)  {   
              $('html,body').animate({ "scrollTop": $(els[0].input).offset().top-50}, 1000);             
           });

        )