회원가입 유효성 검사시 페이지 이동 혹은 포커스가 갑자기 사라질 때

회원가입 폼을 짜고 있는데 자바스크립트로 유효성 검사를 하다가 아주 사소한 실수로 버벅거리게 됐다.

 

function chkForm() {

  if(form.userName.value == ""){

      alert("이름을 입력해주세요");

      form.userName.focus();

      return false;

  }

  return true;

}

 

여기서 더 추가적으로 검사해야하는 태그들은 if문으로 줄줄이 달아서 작성했다.

그리고 <button onClick="chkForm">확인</button> 버튼 요소로 함수를 실행시켰다.

근데 자꾸만 새 페이지로 로드가 되는 것이다. (메소드가 post면 새 페이지 로드, get이면 url에 value 값들이 전부 쳐덕쳐덕 붙어있음..) 

 

처음엔 페이지가 렌더링되는지도 모르고 (메소드가 get상태여서) 왜 인풋창에 focus가 들어갔다가 갑자기 사라져버리지...? 라는 바보같은 생각에 빠져 있었다..

 

음 아주 간단한 실수였는데.

else문에 return true를 추가하면 된다.

위에 처럼 return true를 넣으면 if문을 통과하는 것과 상관없이 마지막에 무조건 return 값이 넘어가서 페이지가 로드된다..

 

(제이쿼리로 click 이벤트를 실행하는 경우에는 preventDefault() 값을 주면 된다.)