[Cookbook] 폼 요소와 유효성 검사

Chapter 9. 폼 요소와 유효성 검사

이번 챕터의 경우 언어(JS)에서 가장 많이 쓰이는 기능(Form)이기도 하지만, 그 만큼 많은 정보를(웹을 통해) 쉽게 구할 수도 있는 부분이라 생각한다.

 

그래서 이번 챕터에서는 레시피 중 기초(초급에 해당하는)적인 부분을 제외한 나머지 레시피만 포스팅 하도록 한다.

1. 폼 중복 전송 방지하기

사용자가 똑같은 폼을 여러 번 반복(중복) 전송하는 것은 서비스(댓글, 결제 등)에 따라, 그 위험 수위가 다르게 나타나지만(결제에 관한 부분은 사용에게 아주 민감하게 다가온다.) 보통의 경우 반복 전송을 막아 주는 것이 좋다.(특히 AJAX 전송 시 아주 유용하게 쓰일 수 있다.)

 
  function _submit(frm){
  	
  	if (!frm) return false;
  	
  	var btn = document.getElementById('_submit_btn'); 
  	var ifrm = document.getElementById('form1_frm');
  	
  	btn.disabled = true;
  	
  	// setTimeout 메서드를 이용하여 딜레이 되는 시간을 일부러 늘렸다.
  	window.setTimeout(function(){
  		
  		frm.target = 'form1_frm';
  		frm.submit();
  		
  		ifrm.onload = function(){
			btn.disabled = false;			
  		}
  		
  	}, 2000);
  	
  	return false;
  } 

결과 페이지:

http://jsfiddle.net/mohwa/b7BV6/