Geek asks and answers

How to go to top of page on error using jQuery Validate

I am using jQuery Validate and trying to move (or scroll) at the top of the page when an error is detected. I added the focusInvalid parameter to stop focusing on the error field, but I can’t figure out how to go to the beginning (like at the top of the page, my error container is displayed).

Below is a simplified version of my script 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"
  }
});
+5
source share
1 answer
$(".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");
        }
    }
})
+6
source

More articles:


All Articles