JS / checkValidity(), input required 폼태그 e.preventDefault() 이슈

파이어베이스로 백엔드를 만들고 프로필 수정기능을 만들던 중 이슈가 생겼다.

input 태그의 속성인 required 속성을 사용하여 폼태그의 유효성 체크를 했는데,

버튼 클릭시 e.preventDefault(); 를 사용하면 required가 동작안하고,

e.preventDefault();를 빼면 DB업데이트가 안되었다.

 

그래서 검색하던중 checkValidity();를 체크해 required 분기 체크를 할 수 있었다.

required 체크가 다되면 e.preventDefault() 후에 DB업데이트 코드실행

// required 체크가 다되면 e.preventDefault(); 실행
$('#updateProfile').click(function(e){
      const form = document.querySelector("#form");
      let state = form.checkValidity();
      if(!!state) {
        e.preventDefault();
        // DB업데이트 코드 샬라샬라~    
      }
    })