Form onsubmit 이벤트 사용시 주의점

HTML 내에서 form 전송을 하기전에  입력된 데이터의 유효성을 체크하기 위해서 onsubmit 이벤트를 사용합니다.

 

흔히 사용되는 HTML 코드는 아래와 같습니다.

<script>

function validateForm( form){

return false;

}

</script>

<form onsubmit="validateForm(this)">

<input type="text" id="email" name="email">

</form>

 

위처럼 코딩 되어 있다면 validateForm 함수내의 체크와는 상관없이 form이 전송되게 됩니다.

왜냐하면 validateForm 내의 리턴값이 form 에 전달되지 않습니다.

전달되게 하기 위해서는 form 안의 코드를 아래와 같이 변경합니다.

 

<form onsubmit="return validateForm(this);">

<input type="text" id="email" name="email">

</form>

 

끝.