Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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"
  }
});
like image 228
Stephen Avatar asked Mar 12 '13 17:03

Stephen


1 Answers

$(".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");
        }
    }
})
like image 68
BBagi Avatar answered Sep 22 '22 11:09

BBagi