如何在jQuery验证无效处理程序滚动动画之前防止跳跃

Question

我正在使用jQuery validate插件来验证我的表格。如果表格无效，我想滚动回页面的顶部。

当前页面闪烁，然后按预期滚动。我需要删除似乎跳到页面顶部的闪光灯。我相信这是因为默认按钮行为没有被阻止。

通常，当试图在其他地方防止默认操作时，我会返回false或预防事件对象上的默认违规。这似乎在这里没有工作，因为事件目标是单击按钮的表单。

从文档中，无效处理程序通过事件和验证器对象。我的下面代码仍然闪烁，即使返回了错误。

invalidHandler: function(event, validator){
    $('html, body').animate({
         scrollTop: 0
    }, 1000);
    return false;
}

表格是从提交按钮提交的：

<button type ="submit" class="btn green ladda-button" data-style="zoom-out">
    <span class="ladda-label">Save Changes</span>
</button>

Answer 1

这是通过确保将重点属性设置为false来修复的。

focusInvalid: false,
invalidHandler: function(event, validator){
    $('html, body').animate({
         scrollTop: 0
    }, 1000);
    return false;
}

默认情况下，jQuery验证将焦点焦点转移到第一个无效字段。