java-school logo

유효성 검사

폼에 접근

<form id="someform"> 폼 태그가 있다면 폼의 참조를 얻는 방법이다.

var form = document.getElementsTagName("form")[0];
var form = document.getElementById("someform");

폼에 이벤트를 추가하는 방법

폼 엘리먼트 내에 submit 버튼이 클릭 이벤트에 핸들러 함수를 매핑하는 방법은 다음과 같다.

<form id="someform" onsubmit="return 핸들러함수() ">

이때 핸들러 함수는 불린을 리턴해야 한다.
유효성 검사를 통과하여 폼을 전송하려면 return true;로
유효성 검사를 통과 못 해서 폼 전송을 취소하려면 return false;로 구현한다.

라디오 버튼과 체크 박스

라디오 버튼을 비활성화 시키는 방법은 아래와 같다.

document.someform.radiogroup[i].disabled = true;

비활성화하면 이 파라미터는 서버에 전송되지 않는다.

send1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 테스트</title>
<script type="text/javascript">
function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
</script>
</head>
<body>
<form id="testForm" method="get" onsubmit="return check()">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" />
	<input type="submit" value="확인" />
</form>
</body>
</html>

예제 실행
이름을 입력하고 W를 선택한 후 서밋 버튼을 클릭하여 전송되는 파라미터와 값을 확인한다.
W 외에 다른 값을 선택한 후 서밋 버튼을 클릭하여 전송되는 파라미터와 값을 확인한다.

라디오 버튼이나 체크 박스를 선택하면 실행되는 이벤트 핸들러 등록 예제

send2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 테스트</title>
<script type="text/javascript">
function agree() {
	var form = document.getElementById("testForm");
	var submit = document.getElementById("submit");
	if (form.agreement.checked == true) {
		submit.disabled = false;	
	} else {
		submit.disabled = true;
	}
	
}
function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	var chk = form.confirm[0].value

	return true;
}
</script>
</head>
<body>
<form id="testForm" method="get" onsubmit="return check()">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" /><br />
	정보 제공에 동의합니다.
	<input type="radio" name="agreement" value="y" onchange="agree()" />
	<input type="submit" id="submit" value="확인" disabled="disabled" />
</form>
</body>
</html>

예제 실행
입력 후 서밋 버튼을 클릭하여 전송되는 파라미터와 값을 확인한다.

그 밖의 참고사항

자바스크립트 코드와 디자인의 분리

엘리먼트의 onclick 속성을 이용하여 이벤트를 등록하는 방법은 디자인과의 결합도가 높은 코드다.
<form id="testForm" method="get" onsubmit="return check()"> 부분이 결합도가 높다. send1.html 파일을 아래처럼 바꾸어서 테스트한다.

send1-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 테스트</title>
<script type="text/javascript">
//<![CDATA[

window.onload = initPage;

function initPage() {
	var form = document.getElementById("testForm");
	form.onsubmit = check;
}

function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}

//]]>
</script>
</head>
<body>
<form id="testForm" method="get">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" />
	<input type="submit" value="확인" />
</form>
</body>
</html>
예제 실행

자바스크립트 코드를 외부 파일로 만들면 좋은 코드가 된다.

send1-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 테스트</title>
<script type="text/javascript" src="send1.js"></script>
</head>
<body>
<form id="testForm" method="get">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" />
	<input type="submit" value="확인" />
</form>
</body>
</html>

예제 실행

send1.js
window.onload = initPage;

function initPage() {
	var form = document.getElementById("testForm");
	form.onsubmit = check;
}

function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
send2-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>자바스크립트 테스트</title>
<script type="text/javascript">
//<![CDATA[
window.onload = initPage;

function initPage() {
	var submit = document.getElementById("submit");
	submit.disabled = true;
	var form = document.getElementById("testForm");
	form.onsubmit = check;
	form.agreement.onchange = agree;
}

function agree() {
	var form = document.getElementById("testForm");
	var submit = document.getElementById("submit");
	if (form.agreement.checked == true) {
		submit.disabled = false;	
	} else {
		submit.disabled = true;
	}
}
function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
//]]>
</script>
</head>
<body>
<form id="testForm" method="get">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" /><br />
	정보 제공에 동의합니다.
	<input type="radio" name="agreement" value="y"/>
	<input type="submit" id="submit" value="확인" />
</form>
</body>
</html>

예제 실행
위 예제 역시 자바스크립트 코드를 분리하면 더 좋은 코드가 된다.
예제 실행