jQuery驗證，滾動到錯誤無法正常工作

Question

所以我有一個3階段的形式，驗證每一步，再次提交。我有一些問題，我想這可能是由於我的JS結構，但我不能確定。

由於某種原因，它只能滾動到第一個錯誤一次，一旦有人填寫字段時清除錯誤，它就會滾動到頁面的頂部。儘管我們現在可以在一個新的頁面上。我已經複製了所有相關代碼，並刪除了大部分JS，因爲有大約300行。我有一個實時網址，如果你想看到工作副本'xxxx'

這裏是JS;

var form = $("#msform"); 
    form.validate({ 
     rules: { 
      age: { 
       digits: true, 
       minlength: 2 
      }, 
      group: { 
       required: true 
      }, 
      product: { 
       required: true 
      }, 
      tan: { 
       required: true 
      }, 
      exfoliate: { 
       required: true 
      }, 
      advertising: { 
       required: true 
      }, 
      morizLove: { 
       required: true 
      }, 
      morizMoreProducts: { 
       required: true 
      }, 
      terms: { 
       required: true 
      }, 
      media: { 
       required: true, 
       minlength: 4 
      }, 
      other: { 
       required: true    
      }, 
      buyother: { 
       required: true, 
       minlength: 4 
      }, 
     }, 
     messages: { 
      fullname: { 
       required: "Please tell us your full name" 
      }, 
      age: { 
       required: "Please tell us your age" 
      }, 
      email: { 
       required: "Please enter a valid email" 
      }, 
      address: { 
       required: "Please tell us your Address" 
      }, 
      postcode: { 
       required: "Please tell us your Post Code" 
      }, 
      product: { 
       required: "Please select a product" 
      }, 
      tan: { 
       required: "Please tell us how often you self tan" 
      }, 
      buymost: { 
       required: "Please tell us which product you use most" 
      }, 
      group: { 
       required: "Please select at least 1" 
      }, 
      maintain: { 
       required: "Please select at least 1" 
      }, 
      advertising: { 
       required: "Please select at least 1" 
      }, 
      morizMoreProducts: { 
       required: "Please tell us what products you would like to see from St. Moriz" 
      }, 
      morizLove: { 
       required: "Please tell us what you love most about St. Moriz" 
      }, 
      terms: { 
       required: "Please accept our Terms & Conditions" 
      }, 
      media: { 
       required: "Please tell us what media you have seen advertising this campaign" 
      }, 
      other: { 
       required: "Please tell us where you normally buy St. Moriz products from" 
      }, 
      buyother: { 
       required: "Please tell us which product you use most" 
      }, 
     }, 
     errorPlacement: function(error, element) { 
      switch(element.attr("name")) { 
      case "product": 
       error.insertAfter($(".product-error")); 
       break; 
      case "tan": 
       error.insertBefore($(".tan-error")); 
       break; 
      case "group": 
       error.insertAfter($("#other")); 
       break; 
      case "exfoliate": 
       error.insertAfter($(".exfoliate-error")); 
       break; 
      case "maintain": 
       error.insertAfter($(".maintain-error")); 
       break; 
      case "terms": 
       error.insertBefore($(".terms-error")); 
       break; 
      case "advertising": 
       error.insertBefore($(".advertising-error")); 
       break; 
      default: 
       // the default error placement for the rest 
       error.insertAfter(element); 
      } 
    } 
    }); 

$(".submit").click(function(){ 
    $("#msform").validate(); 

    if (form.valid() == false){ 

     $('html, body').animate({ 
     scrollTop: ($('.error').offset().top - 60) 
    }, 500); 
    } 
}); 


$(".next").click(function(){ 
    // if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 


     if (form.valid() == true){ 

      //show the next fieldset 
      next_fs.show(); 
      //hide the current fieldset with style 
      current_fs.animate({opacity: 0}, { 
       step: function(now, mx) { 
        //as the opacity of current_fs reduces to 0 - stored in "now" 
        //1. scale current_fs down to 80% 
        scale = 1 - (1 - now) * 0.2; 
        //2. bring next_fs from the right(50%) 
        left = (now * 50)+"%"; 
        //3. increase opacity of next_fs to 1 as it moves in 
        opacity = 1 - now; 
        current_fs.css({ 
       'transform': 'scale('+scale+')', 
       'position': 'absolute' 
       }); 
        next_fs.css({'left': left, 'opacity': opacity, 'position': 'relative'}); 
       }, 
       duration: 800, 
       complete: function(){ 
        current_fs.hide(); 
        animating = false; 
       }, 
       //this comes from the custom easing plugin 
       easing: 'easeInOutBack' 
      });  

       //activate next step on progressbar using the index of next_fs 
      $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active").find('img').attr("src","images/boardActive.png"); 

      // Scroll to top of next step form. 

      $('html, body').animate({ 
     scrollTop: $("#progressbar").offset().top - 200 
      }, 500); 
      return false; 

     } 
     else { // Scrolls to top error 
      $('html, body').animate({ 
     scrollTop: ($('.error').offset().top - 60) 
     }, 500); 
     } 

}); 

$(".previous").click(function(){ 
    // if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 

    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active").find('img').attr("src","images/board.png");; 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'left': left}); 
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity, 'position': 'relative'}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 

}); 

我知道這裏有很多代碼，但我認爲這可能是一個結構性問題。非常感謝您花時間閱讀本文。請查看IP地址以獲取表單如何對驗證作出反應的工作副本。

非常感謝您花時間閱讀本文。

編輯：刪除實時鏈接，因爲問題已得到解答。

Answer 1

$('html, body').animate({ 
    scrollTop: ($('.error:visible').offset().top - 60) 
}, 500); 

儘管是顯示還是不顯示，您的選擇器仍與所有錯誤類匹配。在你的情況下，動畫函數帶走了列表中的第一個匹配項。

當您添加「：可見」時，您只選擇了頁面上顯示的元素。