Avoid scrolling top when validate condition is not meet

Question

I am using jquery-steps for a long form with manu required field. My concern is that each time a condition fails, the page scrolls to the top.

It is particularly annoying on the "terms & conditions" pages which is very long, if the user doesn't check the "I agree" checkbox, it has to go to the bottom to retry.

Here is my simple code:

var form = $("#myform");
form.validate({
   errorPlacement: function errorPlacement(error, element) {
      if (element.attr("name") == "type") {
         error.appendTo($('#errorbox'));
      }
      else {
         element.before(error);
      }
   },
   rules: {
      cgu: {
         required: true
      }
   },
   messages: {
      cgu: {
         required: 'Vous devez accepter les C.G.U pour poursuivre'
      }
   },
   focusInvalid: true,
   onfocusout: function (element) {
      $(element).valid();
   },
});

Even with "focusInvalid: true", the page still scrolls top.

There is nothing in the code that you are showing us that could possibly explain any scrolling. `focusInvalid: true` is the default behavior so there is no point in putting that in there. Please show us a complete example of the code that reproduces the issue. — Sparky, Dec 23 '18 at 00:12

score -1 · Answer 1 · answered Dec 23 '18 at 07:45

-1

Solved with this workaround:

focusInvalid: false,
    invalidHandler: function(form, validator) {
       if (!validator.numberOfInvalids())
          return;
       $('html, body').animate({
          scrollTop: $(validator.errorList[0].element).offset().top
       }, 2000);
    },

answered Dec 23 '18 at 07:45

Jibeji

453
4
14

Solved what exactly? Your OP was lacking in both description and code. – Sparky Dec 23 '18 at 17:44

Avoid scrolling top when validate condition is not meet

1 Answers1