<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
	padding: 0; margin: 0;
}

body {
    font-size:14px;
	font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

a {
	color: #000;
	text-decoration: none;
}
a:hover, a:active {
	color: tomato;
	text-decoration: underline;
}

.btn {
    color:#333;
    font-weight:500;
    border:1px solid #cccc;
    background-color:#fff;
    text-align:center;
    cursor:pointer;
    padding:3px 10px 5px;
    border-radius:4px;
}
.btn:active, .btn:focus, .btn:hover {
	 background-color:#e6e6e6;
	 border-color: #adadad;
	 color: #333;
}
.boxTF {
    border:1px solid #999;
    padding:4px 5px 5px;
    border-radius:4px;
    background-color:#fff;
}
.boxTA {
    border:1px solid #999;
    height:150px;
    padding:3px 5px;
    border-radius:4px;
    background-color:#fff;
    resize: none;
}

textarea:focus, input:focus {
	outline: none;
}

h3 {
	margin: 10px;
}

.box{
	width: 650px;
	margin: 30px auto;
}

.box table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.board-title {
	width:100%;
	height:50px;
	line-height:50px;
	text-align:left;
	font-weight: bold;
	font-size:15px;
}

.board-body tr:first-child{
	border-top: 3px solid #777;
}
.board-body tr {
	height: 40px;
	border-bottom: 1px solid #777;
}
.board-body td:first-child{
	text-align: center;
	width: 100px;
	background: #eee;
}

</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function sendOk() {
	var f = document.boardForm;
	
	// 유효성 검사
	var returnNow = false;
	var s;
	$("form input, form textarea").each(function() {
		if(! $(this).val().trim()) { // 공백까지 없애서 유효성 검사
			s = $(this).closest("tr").find("td:first-child").text();
			s = s.replace(/\s/g, '');
			
			alert(s + "을(를) 입력하세요 !!!");
			
			$(this).focus();
			returnNow = true;
			
			return false; // return false : each를 빠져나갈 수 있다. (break; 개념)
		}
	});
	
	if(returnNow) return;
	
	alert("보내기 성공...");
}
</script>

</head>
<body>

<h3>each - break 구현</h3>

<div class="box">
	<div class="board-title">
    	<h3><span>|</span> 게시판</h3>
	</div>
	
	<form name="boardForm" method="post">
	  <table class="board-body">
	  <tr> 
		  <td >제 목</td>
		  <td style="padding-left:10px;"> 
			<input type="text" name="subject" maxlength="100" class="boxTF" style="width: 97%;">
		  </td>
	  </tr>

	  <tr> 
		  <td>작성자</td>
		  <td style="padding-left:10px;"> 
			<input type="text" name="name" size="35" maxlength="20" class="boxTF">
		  </td>
	  </tr>

	  <tr> 
		  <td style="padding-top:5px;"  valign="top">내 용</td>
		  <td valign="top" style="padding:5px 0px 5px 10px;"> 
			<textarea name="content" cols="75" rows="12" class="boxTA" style="width: 97%;"></textarea>
		  </td>
	  </tr>

	  <tr>
		  <td>패스워드</td>
		  <td style="padding-left:10px;"> 
			   <input type="password" name="pwd" size="35" maxlength="7" class="boxTF">&nbsp;(게시물 수정 및 삭제시 필요 !!!)
		   </td>
	  </tr> 
	  </table>

	  <table>
		 <tr align="center"> 
		  <td height="45">
			  <button type="button" class="btn" onclick="sendOk();"> 등록하기 </button>
			  <button type="reset" class="btn"> 다시입력 </button>
			  <button type="button" class="btn"> 취소하기 </button>
		  </td>
		</tr>
	  </table>
	</form>
</div>

</body>
</html>

return false를 통해 each를 빠져나갈 수 있다.

저작자표시 동일조건

'쌍용강북교육센터 > 10월' 카테고리의 다른 글

1014_Servlet/JSP : EL(Expression Language)과 JSTL (ch10)  (0) 2021.12.28
1028_jQuery : append, prepend, before, after, wrap, clone,  (0) 2021.10.28
1027_jQuery : 선택자 Selectors  (0) 2021.10.28
1027_jQuery : jQuery, Core  (0) 2021.10.28
1022_JSP/Servlet : 파일처리  (0) 2021.10.25

+ Recent posts

티스토리툴바