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);
});
)