jQuery form,submit,input Event

yeong ·2022년 11월 25일
0

jquery

목록 보기
16/20

회원가입 입력값에 대한 검증

form로 처리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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>
	
	<script type="text/javascript">
	$("#id").focus();
	
	/*
	//[회원가입]을 클릭한 경우 호출될 이벤트 처리 함수 등록
	// => 사용자 입력값을 검증하고 모든 입력값에 대한 검증이 성공한 경우 제출 이벤트
	//(Submit Event) 발생 - form 태그 실행
	$("#submitBtn").click(function() {
		$(".error").text("");//모든 입력태그의 에러 메세지에 대한 초기화 처리
		
		if($("#id").val()=="") {
			$("#idMsg").text("아이디를 입력해 주세요.");
			$("#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");
		
		//$(selector).submit() : 선택자로 검색된 태그(form)로 제출 이벤트를 발생하는 메소드
		$("#joinForm").submit();
	});
	*/
	
	$("#submitBtn").click(function() {
		$(".error").text("");
		
		//검증 관련 상태를 저장하기 위한 변수 - false : 검증 실패, true : 검증 성공
		var result=true;
		
		if($("#id").val()=="") {
			$("#idMsg").text("아이디를 입력해 주세요.");
			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) : 선택자로 검색된 태그(입력태그)에서 입력촛점이 다른 태그로
	//이동된 경우 콜백함수를 호출하는 메소드 - focusout 메소드와 동일
	$("#id").blur(function() {
		if($("#id").val()=="") {
			$("#idMsg").text("아이디를 입력해 주세요.");
			return;
		}
		$("#idMsg").text("");
	});
	
	//[다시입력]을 클릭한 경우 호출될 이벤트 처리 함수 등록
	// => 모든 입력태그의 입력값 및 에러 메세지에 대한 초기화 처리
	$("#resetBtn").click(function() {
		//$(selector).val(value) : 선택자로 검색된 태그(입력태그)의 입력값을 변경하는 메소드
		//$("#id").val("");//입력태그 초기화 처리
		
		//$(selector).reset() : 선택자로 검색된 태그(form 태그)의 모든 입력태그를 초기화 처리하는 메소드
		$("#joinForm")[0].reset();
		
		$(".error").text("");
		$("#id").focus();
	});
	</script>
</body>
</html>





submit로 처리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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() {
		$(".error").text("");
		
		//검증 관련 상태를 저장하기 위한 변수 - false : 검증 실패, true : 검증 성공
		var result=true;
		
		if($("#id").val()=="") {
			$("#idMsg").text("아이디를 입력해 주세요.");
			result=false;
		}
		
		if($("#passwd").val()=="") {
			$("#passwdMsg").text("비밀번호를 입력해 주세요.");
			result=false;
		}
		
		if($("#name").val()=="") {
			$("#nameMsg").text("이름을 입력해 주세요.");
			result=false;
		}
		
		if($("#email").val()=="") {
			$("#emailMsg").text("이메일을 입력해 주세요.");
			result=false;
		}

		//result 변수에 [false]가 저장된 경우 태그의 기본 이벤트를 제거되고 이벤트 전달 중지
		// => form 태그의 제출 이벤트가 취소되어 form 태그 미실행
		return result;
	});
	
	$("#resetBtn").click(function() {
		$(".error").text("");
		$("#id").focus();
	});
	</script>
</body>
</html>





input로 처리

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/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="22_input_required.html" method="post" id="joinForm">
		<fieldset>
			<legend>회원가입정보</legend>
			<ul>
				<li>
					<label for="id">아이디</label>
					<!-- 입력태그에 required 속성을 설정하면 입력값이 없는 경우 form 태그 미실행 -->
					<!-- <input type="text" name="id" id="id" required="required"> -->
					<input type="text" name="id" id="id" class="required">
					<span id="idMsg" class="error"></span>
				</li>
				<li>
					<label for="passwd">비밀번호</label>
					<input type="password" name="passwd" id="passwd" class="required">
					<span id="passwdMsg" class="error"></span>
				</li>
				<li>
					<label for="name">이름</label>
					<input type="text" name="name" id="name" class="required">
					<span id="nameMsg" class="error"></span>
				</li>
				<li>
					<label for="email">이메일</label>
					<input type="text" name="email" id="email" class="required">
					<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();
	
	$("#joinForm").submit(function() {
		$(".error").text("");
		
		var result=true;
	
		//에러 메시지가 요소값으로 저장된 Object 객체 생성
		var message={"id":"아이디를 입력해 주세요.","passwd":"비밀번호를 입력해 주세요."
				,"name":"이름을 입력해 주세요.","email":"이메일을 입력해 주세요."};
		
		//태그의 class 속성값이 [required]로 설정된 태그(입력태그)를 검색하여 명시적 반복 
		$(this).find(".required").each(function() {
			if($(this).val()=="") {//입력태그의 입력값이 없는 경우
				//입력태그의 id 속성값을 반환받아 변수에 저장
				var value=$(this).attr("id");
			
				//에러 메세지가 출력될 태그를 검색하여 에러 메세지로 태그내용 변경
				$("#"+value+"Msg").text(message[value]);
				
				result=false;
			}
		});
		
		return result;
	});
	</script>
</body>
</html>
profile
yeong
이전 포스트

jQuery - event scroll

다음 포스트

jQuery - checkbox event

0개의 댓글