Written
By default ChronoForms shows errors from serverside validation at the top of the page and also in a message attached to the input where the error came from.
In this FAQ I've started to collect some notes on different ways of handling errrors.
Returning focus to the Captcha input
If the form is long then it may not be evident that the user needs to scroll down to find a Captcha error. This JavaScript snippet will put the form focus in the Captcha input box if there is a Captcha error. It assumes that you are using the standard ChronoForms Captcha setup.
window.addEvent('domready', function() {
var error = $$('#chrono_verification1_container_div div.error-message')[0];
if ( error.get('html') !== '' ) {
$$('#chrono_verification1_container_div input.chrono_captcha_input')[0].focus();
}
});
If you have more than one form on the page then you will probably need to edit the CSS selectors to make sure that they apply to the correct form.
Returning focus to the ReCaptcha input
If the form is long then it may not be evident that the user needs to scroll down to find a ReCaptcha error. This JavaScript snippet will put the form focus in the ReCaptcha input box if there is a ReCaptcha error. It assumes that you have the {ReCaptcha} tag in Custom Code element with the id=recaptcha
window.addEvent('domready', function() {
var error = $$('#recaptcha_container_div div.error-message')[0];
if ( error.get('html') !== '' ) {
$('recaptcha_response_field').focus();
}
});
Updates from OzNeilAu
In a forum post user OzNeilAu suggested some improvements to this code.
a) Replacing .focus() with .scrollIntoView(); to improve the viewer experience.
b) Using an id attached to the form rather than to the specific input. ChronoForms assigns a unique id to the <form> tag like chonoform_form_name so that can be used.
Using these changes the .focus() line of the code to:
$('chonoform_form_name').scrollIntoView();
Where form_name needs to be replaced with the name of your form.
Please see this FAQ for ways to bring Thank You messages into view using a similar method.
