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 |