フォームの検証自動スクロールの変更javascript

Question

私はフォームのjavascriptの検証に取り組んでいます。私の問題は、フォームを送信すると、ブラウザが自動的に空のセルにジャンプすることです。これは問題ではなく、私はこのようにそれが好きです。私の問題は、私のページに固定ヘッダーが表示されていることです。このヘッダーはフォームフィールドをカバーしています。それを回避する方法はありますか？ありがとう！

Answer 1

私は同じ問題を抱えていたし、このようにそれを修正：結合

のEventListener：

$('input').on('invalid',function() { 
    scrollToInvalid(); 
    }); 

機能：完全に

function scrollToInvalid() { 

    //Height of your nav bar with some offset 
    var navHeight = $('nav#main').height() + 20; 

    // Offset of the first input element minus your nav height 
    var firstInvalidPosTop = $('input:invalid').first().offset().top; 
    var newScrollPos  = firstInvalidPosTop - navHeight; 

    // return true if the invalid element is already within the window view. 
    // If you return false, the validation will stop. 
    if ( newScrollPos > (window.pageYOffset + navHeight) && 
     newScrollPos < (window.pageYOffset + window.innerHeight - navHeight)) { 
    return true; 
    } else { 

    // If the first invalid input is not within the current view, scroll to the new position. 
    $('html, body').scrollTop(newScrollPos); 
    } 
};