양식 유효성 검사 오류 : 상대 점프 및 끈적한 헤더

Question

내 페이지 중 하나에서 웹 양식과 끈적한 헤더가 있습니다.

사용자가 modern-ish browser을 사용하여이 양식을 제출하려고하지만 필수 필드를 채우지 않은 경우 (예상대로) 오류 풍선이 표시됩니다.

자, 내 질문은 다음과 같습니다 :

방지하는 현명한 방법이 있나요 (jsfiddle) 다음과 같이

문제는 입력 필드를 숨 깁니다 끈적 끈적한 헤더입니다 이 동작과 상대적인 페이지 - 점프에 어떤 픽셀을 추가하면 form.checkValidity()이 false 일 때 제출 이벤트로 인해 발생합니까?

내 현재 구현 as answer을 추가했습니다.

(N.B. 끈끈한 헤더가 유익한 지 여부는 논할 수 있지만,이 논의는 UX에서 취해진 다).

Answer 1

평가에 대한 나의 현재의 구현 : http://jsfiddle.net/je8gttnj/

그것의 요지는 다음과 같은 코드 :

jQuery(document).on('click', 'form :submit', function(e) { 
    var form; 
    if ((form = jQuery(e.target).closest('form')).length !== 1) { 
    return; 
    } 
    if (!form[0].checkValidity || form[0].checkValidity()) { 
    return; 
    } 
    reposition(); 
}); 

reposition()는 기본적으로 window.scrollBy(0, headerHeight) 호출

:

var headerHeight; 
var reposition = function() { 
    headerHeight || (headerHeight = jQuery('.navbar-fixed-top').outerHeight() + 50); 
    setTimeout(function() { 
    window.scrollBy(0, -headerHeight); 
    }, 50); 
}; 

개인적으로, 나는 가능한 한 멋지지 않다. 있어야하지만, 일을합니다.