[HTML] form tag - onsubmit

form tag의 onsubmit 속성

onsubmit 이란?

form 태그에서 데이터를 전송하기 전에 데이터에 대한 유효성 검사를 진행

예시 코드

<script>
function validateForm(form){
	if(!form.user_id.value) {
		alert("아이디를 입력하세요.");
		return false;
	}	
	if(form.user_pw.value == "") {
		alert("패스워드를 입력하세요.");
		return false;
	}
}
</script>
<form action="LoginProcess.jsp" method="post" name="loginFrm"
	onsubmit="return validateForm(this);">
	아이디 : <input type="text" name="user_id" /><br />
	패스워드 : <input type="password" name="user_pw" /><br />
	<input type="submit" value="로그인하기" />
</form>

input type="submit" 버튼을 클릭할 때, onsubmit 이벤트가 발생하게 되고 함수(validateForm)를 호출하여 "실행한 결과가 false라면 데이터 전송을 하지 않고 true이면 데이터를 전송한다."

주의사항

<form action="LoginProcess.jsp" method="post" name="loginFrm"
	onsubmit="validateForm(this);"> ... </form>

위의 경우와 같이 onsubmit의 속성 값으로 return을 빼먹게 되면 제대로 동작하지 않으니 반드시 return을 같이 써주어야한다.