jquery驗證插件和滾動

我正在使用jQuery驗證插件。當有無效字段時，它將重點放在第一個無效字段上。但是，我的標籤位於我的字段之上，我想向上滾動一點，以便用戶可以看到標籤和字段。我已經看過scrollTo插件，但還沒有想出一個簡單的方法來整合它。也許有人以前做過這樣的事情？jquery驗證插件和滾動

來源

2009-08-04 hiester

你能告訴我們你是如何做滾動到現在？你說它滾動到inputfield，所以已經有一些滾動。 – Sander 2009-08-04 12:57:39

@sander將焦點設置爲不在屏幕外的任何內容都會強制瀏覽器滾動至少足夠遠以至於看到焦點元素。這可能是依賴於瀏覽器實現的，儘管 – Kip 2009-08-04 13:12:15

我正在使用jquery validate插件。確實，它着重於第一個無效元素。如果該元素如果不在屏幕上，則確實滾動到該元素（輸入字段），但不會更高。它不滾動，它只是非常快速地跳到現場。如果有卷軸，速度太快而無法察覺。 – hiester 2009-08-04 17:21:28

好吧，所以你用焦點跳轉到你的元素驗證失敗。

您可以刪除該代碼，因爲您要嘗試實現向該元素滾動。

需要執行這些步驟才能滾動到正確的元素。

在您的頭部添加scrollTo插件。
確保標籤已準備就緒（帶有ID或類別的東西）（您的情況是目標，因爲您要滾動到標籤的位置而不是輸入字段）
if你現在要做：

$ .scrollTo（'#yourlabelID'，「slow」）;

它將滾動到您的標籤的位置。

與在常規滾動中一樣，如果元素太接近頁面的底部，它將只滾動到頁面的底部而不是更遠。

演示：http://sander.netcentric.be/test/scroll.html

來源

2009-08-04 14:44:33 Sander

我有一個類似的問題。我將我的驗證錯誤顯示在我的表單上方的有序列表中，而不是以內聯方式顯示它們。當jQuery validate插件發現錯誤時，我通過編輯invalidHandler函數並禁用focusInvalid選項，將窗體設置爲滾動到窗體頂部以通知用戶該錯誤。

$("#residential-evaluation").validate({ 
// Scroll to top of #errors on validate 
invalidHandler: function(form, validator){ 
    $.scrollTo('#errors', "slow"); 
}, 
focusInvalid:false, 
//Error output 
errorLabelContainer: "#errors", 
wrapper: "li" 
});

這個職位是非常有用的，以及：

overriding a function within the jquery validation plugin

這種設置依賴於scrollTo插件所添加動畫。

來源

2009-12-10 13:59:45

jquery驗證插件和滾動

回答

相關問題