유효성 검사
폼에 접근
<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>
예제 실행
입력 후 서밋 버튼을 클릭하여 전송되는 파라미터와 값을 확인한다.
그 밖의 참고사항
- 라디오 버튼이나 체크박스의 경우 옵션을 동적으로 추가 또는 삭제할 수 없다.
- input 엘리먼트의 type 속성은 text, password, hidden 이 있다.
- textarea는 여러 줄을 입력할 수 있게 한다.
- input 과 textarea에서 사용자가 입력한 값은 value 속성으로 접근할 수 있다.
- click 이외에도 change, focus, blur 이벤트를 이용하여 폼 유효성 검사를 수행할 수 있다.
- 이벤트 핸들러를 등록하는 방법은 아래와 같다.
- onclick="핸들러 함수()"
- onchange="핸들러 함수()"
- onfocus="핸들러 함수()"
- onblur="핸들러 함수()"
자바스크립트 코드와 디자인의 분리
엘리먼트의 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">
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">
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>