๐21_submit_event.html
<!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>Submit 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();
$("#joinForm").submit(function() {
$(".error").text("");
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;
}
return result;
});
$("#resetBtn").click(function() {
$(".error").text("");
$("#id").focus();
});
</script>
</body>
</html>
