input 박스 invalid 이벤트

최근에 form 내의 input 값들의 타당성 검증을 하던도중 디자인 문제에 직면하였다.

html5에서는 타당하지 않은 값일 경우 자동으로 스크롤바를 하여서 해당 input 필드로 이동하는데,

이 과정에서 내 사이트의 헤더가 position: fixed로 설정이 되어있어서 해당 input 필드를 덮어씌우는 현상이 발생하였다.

작은 문제이지만 구글링 해본결과 이러한 문제로 실제 고민하던 사람이 있었다.

아래는 그와 관련된 질문 링크이다.

https://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

결론적으로 아래의 링크에 올라온 해결책을 이용하여 문제를 해결하였다.

https://jsfiddle.net/hubfiddle/mu1b4p7e/

아래의 링크에서는 input 박스의 invalid라는 이벤트를 받아주는데,

이러한 이벤트를 jquery에서 받아줄 수 있다는 것을 처음 알게 되었다.

결과적으로 위 링크에서는 해당 이벤트를 받아서 스크롤 위치를 조정해주는 작업을 해준다.