jQueryの検証、エラーへのスクロールが正しく機能しない

Question

私は3段階のフォームを各ステップで検証し、再度提出します。私はいくつかの問題を抱えていますが、おそらく私のJSの構造に起因するかもしれないと思いますが、私は確信が持てません。

何らかの理由で、何らかの理由で最初のエラーに一度スクロールするだけです。誰かがフィールドを埋めるとそのエラーがクリアされた後、ページの上部にスクロールします。事実にもかかわらず私たちは今新しいページに出ることができます。私はすべての関連コードをコピーし、300行ほどあるのでJSの多くを取り除きました。私はあなたが作業コピー 'xxxx'を見たい場合はライブURLを持っています

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アドレスを参照してください。

これを読んでいただきありがとうございます。

EDIT：質問が回答されたライブリンクを削除しました。

Answer 1

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

セレクタがifが表示されているかどうかにかかわらず、すべてのエラークラスと一致します。あなたのケースでは、アニメート機能がリスト内の最初に一致した項目を取りました。

「：visible」を追加すると、ページに表示されている要素のみが選択されました。