<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>영수증 확인폼 - jQuery DOM연습2</title>
<style>
#receipt {
width: 700px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
table {
width: 100%;
}
table,
#receiptOption,
th,
td {
border: 1px solid #aaaaaa;
border-collapse: collapse;
padding: 0;
}
tr {
height: 40px;
}
th {
width: 180px;
text-align: left;
padding: 8px;
background-color: rgb(198, 214, 235);
}
#receiptOption {
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
.longText {
width: 300px;
height: 20px;
margin: 5px 10px;
}
.shortText {
width: 60px;
height: 30px;
margin: 5px 20px;
}
#btn {
font-size: 16px;
width: 80px;
height: 35px;
color: white;
background-color: rgb(54, 104, 168);
display: block;
margin: auto;
}
/* 처음 시작은 구매자명과 결제금액만 보이게 */
.hidden {
display: none;
}
</style>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
const radioButton = $('input[name="option"]');
const form1 = $('form[name="frm1"]');
const form2 = $('form[name="frm2"]');
const form3 = $('form[name="frm3"]');
const submitButton = $('#btn');
function formVisibility() {
const selectOption = $('input[name="option"]:checked').val();
form1.addClass('hidden');
form2.addClass('hidden');
form3.addClass('hidden');
if (selectOption === "구매자명+금액") {
form1.removeClass('hidden');
} else if (selectOption === "이메일") {
form2.removeClass('hidden');
} else if (selectOption === "카드번호") {
form3.removeClass('hidden');
}
}
radioButton.change(formVisibility);
formVisibility();
function validateForm() {
const selectOption = $('input[name="option"]:checked').val();
if (selectOption === "구매자명+금액") {
const name = form1.find('input[name="name"]').val();
const price = form1.find('input[name="price"]').val();
if (!name || /[^가-힣a-zA-Z]/.test(name)) {
alert("구매자명을 입력하세요.");
form1.find('input[name="name"]').focus();
return false;
}
if (!price || isNaN(price) || Number(price) <= 0) {
alert("결제금액을 입력하세요.");
form1.find('input[name="price"]').focus();
return false;
}
form1.submit();
} else if (selectOption === "이메일") {
const email = form2.find('input[name="email"]').val();
const emailPattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if (!email || !emailPattern.test(email)) {
alert("이메일을 입력하세요.");
form2.find('input[name="email"]').focus();
return false;
}
form2.submit();
} else if (selectOption === "카드번호") {
const cardFields = form3.find('input[name="cardNum"]');
for (let i = 0; i < cardFields.length; i++) {
const cardNum = cardFields[i].value;
if (!cardNum || isNaN(cardNum) || cardNum.length !== 4) {
alert("카드번호를 입력하세요.");
$(cardFields[i]).focus();
return false;
}
}
form3.submit();
}
return true;
}
submitButton.click(function (event) {
validateForm();
});
});
</script>
<body>
<div id="receipt">
<h3>영수증 확인을 위해 아래의 정보를 정확히 입력해 주시기 바랍니다.</h3>
<br>
<div id="receiptOption">
<input type="radio" name="option" value="구매자명+금액" checked>구매자명 + 금액
<input type="radio" name="option" value="이메일">이메일
<input type="radio" name="option" value="카드번호">카드번호
</div>
<form class="inner_table" name="frm1" action="https://www.w3schools.com/action_page.php" method="get">
<table>
<tr>
<th>구매자명</th>
<td><input type="text" class="longText" name="name" value=""></td>
</tr>
<tr>
<th>결제금액</th>
<td><input type="number" class="longText" name="price" value=""></td>
</tr>
</table>
</form>
<form class="inner_table hidden" name="frm2" action="https://www.w3schools.com/action_page.php" method="get">
<table>
<tr>
<th>이메일</th>
<td><input type="text" class="longText" name="email" value=""></td>
</tr>
</table>
</form>
<form class="inner_table hidden" name="frm3" action="https://www.w3schools.com/action_page.php" method="get">
<table>
<tr>
<th>카드번호</th>
<td>
<input type="number" class="shortText" name="cardNum" value="">-
<input type="number" class="shortText" name="cardNum" value="">-
<input type="number" class="shortText" name="cardNum" value="">-
<input type="number" class="shortText" name="cardNum" value="">
</td>
</tr>
</table>
</form>
<br>
<input type="submit" id="btn" value="제출">
</div>
</body>
</html>
Junior Backend Developer