I'm using jQuery Validate and trying to move (or scroll) to the top of the page when an error is found. I've added the focusInvalid option to stop focusing on a field with an error, but can't figure out how to move to the top of the page (as at the top of the page, my error container is visible).
A simplified version of my script is below, and thanks for any help with this.
$(".event-form").validate({
errorContainer: ".error-container",
errorLabelContainer: ".error-container ul",
wrapper: "li",
focusInvalid: false,
ignore: "",
rules: {
title: { required: true }
},
messages: {
title: "You must enter the title"
}
});
$(".event-form").validate({
errorContainer: ".error-container",
errorLabelContainer: ".error-container ul",
wrapper: "li",
focusInvalid: false,
ignore: "",
rules: {
title: { required: true }
},
messages: {
title: "You must enter the title"
},
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("html, body").animate({ scrollTop: 0 }, "fast");
}
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With