html5输入错误信息

Question

我有一个用于添加员工的管理模板页面。页面设计是这样的，其中标题（顶部）和导航（左侧）是位置固定的。所以内容区域（其余区域，用于添加员工的表格）在向下滚动时位于标题后面。

最初，点击提交按钮时出现问题，输入字段和相应的错误消息都位于标题区域的后面。我设法使用以下 jQuery 代码将其带回前面或内容区域：

<script>
    $('#submt-form').click(function(){
        $('html,body').animate({scrollTop: $('input:invalid').offset().top-150}, 'slow');

    });
</script>

现在的问题是，当输入字段返回到带有上述 jquery 代码的内容区域时，相应字段上的 html 5 错误消息需要一些时间（几秒钟）才能移回输入字段的附加位置。

有什么方法可以让错误消息随着相应的输入字段一起移动。

Answer 1

尝试绑定到输入元素的“无效”事件，在验证之后但在无效 UI 显示之前触发。