Episerver Forms scroll to Validation Error

I originally did this in QRC but I just had this come up on another project so I figured I would put it in here. If you have a request to perform some Javascript on an Episerver Forms implementation there are some Javascript events that you can tie into.

https://world.episerver.com/documentation/developer-guides/forms/handling-events-for-forms/

Here is the example where I implemented scrolling to the first form validation error.

if (typeof $$epiforms !== 'undefined') {
			$$epiforms(document).ready(function myfunction() {
				$$epiforms(".EPiServerForms").on("formsStepValidating", function (event, param1, param2) {
					if ($(".ValidationFail").length > 0) {
						$("html, body").animate({ scrollTop: $(".ValidationFail").offset().top - $(".header").outerHeight() - 50 }, 1000);
					}
				});
			});
		}

Comments

• This looks useful! Depending on how/when it gets triggered, adding some focus state management would probably be a good idea.