본문 바로가기
학원/복기

[jQuery] Form 이벤트 / Submit 이벤트

조가루 2023. 6. 14. 00:31

Form 이벤트

예시)

 

[html + css]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
fieldset {
	width: 800px;
	margin: 10px auto;
}

legend {
	font-size: 1.2em;
}

#joinForm ul li {
	list-style-type: none;
	margin: 15px 0;
}

#joinForm label {
	width: 100px;
	text-align: right;
	float: left;
	margin-right: 10px;
}

#btnFs {
	text-align: center;
}

.error {
	color: red;
	margin-left: 10px;
}
</style>
</head>
<body>
	<h1>Form Event</h1>
	<hr>
	<form id="joinForm">
	<fieldset>
		<legend>회원가입정보</legend>
		<ul>
			<li>
				<label for="id">아이디</label>
				<input type="text" name="id" id="id">
				<span id="idMsg" class="error"></span>
			</li>
			<li>
				<label for="passwd">비밀번호</label>
				<input type="password" name="passwd" id="passwd">
				<span id="passwdMsg" class="error"></span>
			</li>
			<li>
				<label for="name">이름</label>
				<input type="text" name="name" id="name">
				<span id="nameMsg" class="error"></span>
			</li>
			<li>
				<label for="email">이메일</label>
				<input type="text" name="email" id="email">
				<span id="emailMsg" class="error"></span>
			</li>
		</ul>
	</fieldset>
	<fieldset id="btnFs">
		<button type="button" id="submitBtn">회원가입</button>
		<button type="button" id="resetBtn">다시작성</button>
	</fieldset>
	</form>
</body>
</html>

 

[회원가입] 버튼을 클릭한 경우 호출되는 이벤트 처리 함수를 등록
→  이벤트 처리 함수에서는 사용자 입력값을 검증하고 모든 입력값의 검증이 성공한 경우 제출 이벤트(Submit Event)를 발생시켜 form 태그가 실행되도록 명령 작성

 

$("#submitBtn").click(function() {
	//에러 메세지를 출력하는 모든 태그의 태그내용을 초기화 처리
	$(".error").text("");
		
	if($("#id").val()=="") {
		$("#idMsg").text("아이디를 반드시 입력해 주세요.");
		$("#id").focus();
			return;
	}
		
	var idReg=/^[a-zA-Z]\w{5,19}$/g;
	if(!idReg.test($("#id").val())) {
		$("#idMsg").text("6~20자의 영문자, 숫자와 특수기호(_)만 사용 가능합니다.");
		$("#id").focus();
		return;
	}
		
	if($("#passwd").val()=="") {
		$("#passwdMsg").text("비밀번호를 반드시 입력해 주세요.");
		$("#passwd").focus();
		return;
	}
		
	if($("#name").val()=="") {
    	$("#nameMsg").text("이름을 반드시 입력해 주세요.");
		$("#name").focus();
		return;
	}
		
	if($("#email").val()=="") {
		$("#emailMsg").text("이메일을 반드시 입력해 주세요.");
		$("#email").focus();
		return;
	}
		
	$("#joinForm").attr("action", "20_form_event.html");
	$("#joinForm").attr("method", "post");
		
	$("#joinForm").submit();
});

다른 방식으로도 코드 작성이 가능하다. (한번에 입력값 검증하도록)

$("#submitBtn").click(function() {
	//입력값 검증 결과를 저장하기 위한 변수
	// => false : 검증 실패, true : 검증 성공
	var result=true;
		
	//에러 메세지를 출력하는 모든 태그의 태그내용을 초기화 처리
	$(".error").text("");
		
	var idReg=/^[a-zA-Z]\w{5,19}$/g;
	if($("#id").val()=="") {
		$("#idMsg").text("아이디를 반드시 입력해 주세요.");
		result=false;
	} else if(!idReg.test($("#id").val())) {
		$("#idMsg").text("6~20자의 영문자, 숫자와 특수기호(_)만 사용 가능합니다.");
		result=false;
	}
		
	if($("#passwd").val()=="") {
		$("#passwdMsg").text("비밀번호를 반드시 입력해 주세요.");
		result=false;
	}
		
	if($("#name").val()=="") {
		$("#nameMsg").text("이름을 반드시 입력해 주세요.");
		result=false;
	}
		
	if($("#email").val()=="") {
		$("#emailMsg").text("이메일을 반드시 입력해 주세요.");
		result=false;
	}
		
	if(!result) return;//입력값 검증이 실패한 경우 이벤트 처리 함수 종료
		
	$("#joinForm").attr("action", "20_form_event.html");
	$("#joinForm").attr("method", "post");
		
	$("#joinForm").submit();
});

$(selector).blur(callback) 
: 선택자로 검색된 태그(입력태그)에서 입력촛점이 다른 태그로 이동한 이벤트가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드 → $(selector).focusout(callback) 메소드와 동일

 

$("#id").blur(function() {
	var idReg=/^[a-zA-Z]\w{5,19}/g;
	if($("#id").val()=="") {
		$("#idMsg").text("아이디를 반드시 입력해 주세요.");
		return;
	} else if (!idReg.test($("#id").val())) {
		$("#idMsg").text("6~20자의 영문자, 숫자와 특수기호(_)만 사용 가능합니다.");
		return;
	}
	$("#idMsg").text("");
});

[다시작성] 버튼을 클릭한 경우 호출되는 이벤트 처리 함수 등록 
→ 이벤트 처리 함수에서는 입력태그의 모든 입력값을 초기화 처리되도록 명령 작성

$(selector).reset() 
: 선택자로 검색된 태그(form 태그)의 모든 입력태그의 입력값을 초기화 처리하는 메소드 - 첫번째 form 태그를 제공받아 초기화 처리한다.

(elector로 검색되는 태그가 다수일 경우, 모두 다 reset 시키면 안되기 때문에 [index]을 붙여서 몇번째 요소의 form 태그를 제공받을지 명시해주어야 한다.)

$("#resetBtn").click(function() {
	$("#joinForm")[0].reset();
	$("#id").focus();
	$(".error").text("");
});

 

Submit 이벤트

버튼 자체가  submit, reset 이벤트를 발생시키는 경우의 입력값 검증

 

<button type="submit" id="submitBtn">회원가입</button>
<button type="reset" id="resetBtn">다시작성</button>

 

 

[소스코드]

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style type="text/css">
fieldset {
	width: 800px;
	margin: 10px auto;
}

legend {
	font-size: 1.2em;
}

#joinForm ul li {
	list-style-type: none;
	margin: 15px 0;
}

#joinForm label {
	width: 100px;
	text-align: right;
	float: left;
	margin-right: 10px;
}

#btnFs {
	text-align: center;
}

.error {
	color: red;
	margin-left: 10px;
}
</style>
</head>
<body>
	<h1>Form Event</h1>
	<hr>
	<form action="21_submit_event.html" method="post" id="joinForm">
	<fieldset>
		<legend>회원가입정보</legend>
		<ul>
			<li>
				<label for="id">아이디</label>
				<input type="text" name="id" id="id">
				<span id="idMsg" class="error"></span>
			</li>
			<li>
				<label for="passwd">비밀번호</label>
				<input type="password" name="passwd" id="passwd">
				<span id="passwdMsg" class="error"></span>
			</li>
			<li>
				<label for="name">이름</label>
				<input type="text" name="name" id="name">
				<span id="nameMsg" class="error"></span>
			</li>
			<li>
				<label for="email">이메일</label>
				<input type="text" name="email" id="email">
				<span id="emailMsg" class="error"></span>
			</li>
		</ul>
	</fieldset>
	<fieldset id="btnFs">
		<button type="submit" id="submitBtn">회원가입</button>
		<button type="reset" id="resetBtn">다시작성</button>
	</fieldset>
	</form>
	
	<script type="text/javascript">
	$("#id").focus();
	
	//$(selector).submit(callback) : 선택자로 검색된 태그(form 태그)에서 제출 이벤트(Submit Event)가
	//발생되는 이벤트가 발생될 경우 콜백함수(이벤트 처리 함수)를 호출하는 메소드
	$("#joinForm").submit(function() {
		var result=true;
		
		$(".error").text("");
		
		var idReg=/^[a-zA-Z]\w{5,19}$/g;
		if($("#id").val()=="") {
			$("#idMsg").text("아이디를 반드시 입력해 주세요.");
			result=false;
		} else if(!idReg.test($("#id").val())) {
			$("#idMsg").text("6~20자의 영문자, 숫자와 특수기호(_)만 사용 가능합니다.");
			result=false;
		}
		
		if($("#passwd").val()=="") {
			$("#passwdMsg").text("비밀번호를 반드시 입력해 주세요.");
			result=false;
		}
		
		if($("#name").val()=="") {
			$("#nameMsg").text("이름을 반드시 입력해 주세요.");
			result=false;
		}
		
		if($("#email").val()=="") {
			$("#emailMsg").text("이메일을 반드시 입력해 주세요.");
			result=false;
		}
		
		//입력값 검증이 실패한 경우 이벤트 처리 함수 종료 
		// => 제출 이벤트에 의해 form 태그가 실행되지 않도록 [false] 반환 - 기본 이벤트 명령 취소 
		if(!result) return false;
	});
	
	$("#resetBtn").click(function() {
		$("#id").focus();
		$(".error").text("");
	});
	</script>
</body>
</html>

 

저작자표시 비영리 변경금지

'학원 > 복기' 카테고리의 다른 글

[jQuery] hide 메소드와 show 메소드 / slideDown 메소드와 slideUp 메소드 / fadeIn 메소드와 fadeOut 메소드 / toggle 메소드  (0) 2023.06.14
[jQuery] checkbox 이벤트  (0) 2023.06.14
[jQuery] 마우스(mouse) 이벤트 / 키(key) 이벤트 / 스크롤(scroll) 이벤트  (0) 2023.06.14
[jQuery] Event Handle  (0) 2023.06.13
[jQuery] 태그의 추가와 삭제 / 이동  (0) 2023.06.12

'학원/복기' Related Articles

티스토리툴바