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之前觸發。