자바스크립트로 HTML 폼 제출하는 방법
HTML 폼(form)을 자바스크립트(JavaScript)로 제출하려면, onsubmit 이벤트가 발생하는 시점에 validate() 함수를 호출하여 입력된 데이터의 유효성을 먼저 검사하는 방식을 사용합니다.
유효성 검사를 통과하면 폼이 서버로 정상적으로 전송되고, 검사에 실패하면 return false; 구문으로 전송이 중단됩니다. 이를 통해 이름 누락, 잘못된 이메일 형식처럼 잘못된 데이터가 서버로 넘어가는 것을 사전에 차단할 수 있습니다.
핵심 동작 원리
- onsubmit 이벤트: 사용자가 제출 버튼을 클릭하면 폼이 전송되기 직전에 발생하는 이벤트입니다.
- validate() 함수: 이름, 이메일, 우편번호, 국가 등 필수 입력값이 올바르게 작성되었는지 순차적으로 확인합니다.
- focus() 메서드: 잘못된 입력 필드로 커서를 자동으로 이동시켜 사용자가 즉시 수정할 수 있도록 돕습니다.
예제 코드
아래 코드를 직접 실행하면 자바스크립트로 HTML 폼을 제출하고 유효성을 검사하는 전체 과정을 확인할 수 있습니다.
<html>
<head>
<title>폼 유효성 검사</title>
<script>
// 폼 유효성 검사 함수
function validate() {
if( document.myForm.Name.value == "" ) {
alert( "이름을 입력해 주세요!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" ) {
alert( "이메일을 입력해 주세요!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "우편번호는 ##### 형식으로 입력해 주세요." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" ) {
alert( "국가를 선택해 주세요!" );
return false;
}
return( true );
}
</script>
</head>
<body>
<form action = "/cgi-bin/test.cgi" name = "myForm" onsubmit = "return(validate());">
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td align = "right">이름</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td align = "right">이메일</td>
<td><input type = "text" name = "EMail" /></td>
</tr>
<tr>
<td align = "right">우편번호</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td align = "right">국가</td>
<td>
<select name = "Country">
<option value = "-1" selected>[선택하세요]</option>
<option value = "1">캐나다</option>
<option value = "2">스리랑카</option>
<option value = "3">멕시코</option>
</select>
</td>
</tr>
<tr>
<td align = "right"></td>
<td><input type = "submit" value = "제출" /></td>
</tr>
</table>
</form>
</body>
</html>
코드 설명
- 이름 검사: 이름 입력란이 비어 있으면 경고창을 띄우고 해당 필드에 포커스를 맞춘 후 전송을 중단합니다.
- 이메일 검사: 이메일 입력란이 비어 있는지 확인합니다. 더 강력한 검증이 필요하다면 정규표현식(regex)으로 이메일 형식까지 확인할 수 있습니다.
- 우편번호 검사: 값이 비어 있거나, 숫자가 아니거나(
isNaN), 길이가 5자리가 아니면 올바른 형식을 안내합니다. - 국가 검사: 셀렉트 박스의 기본값(-1)이 그대로 선택된 상태인지 확인하여, 사용자가 실제로 국가를 선택했는지 검증합니다.
모든 검사를 통과하면 validate() 함수는 true를 반환하고, 폼은 지정된 action 주소(/cgi-bin/test.cgi)로 정상적으로 제출됩니다.