[Spring][쇼핑몰 프로젝트][14] 작가등록 기능 구현 - 3

https://kimvampa.tistory.com/157

VamPa/src/main/webapp/WEB-INF/views/admin/authorEnroll.jsp

@@ -62,6 +62,7 @@
                     			</div>
                     			<div class="form_section_content">
                     				<input name="authorName">
+                    				<span id="warn_authorName">작가 이름을 입력 해주세요.</span>
                     			</div>
                     		</div>
                     		<div class="form_section">
@@ -74,6 +75,7 @@
                     					<option value="01">국내</option>
                     					<option value="02">국외</option>
                     				</select>
+                    				<span id="warn_nationId">소속 국가를 선택해주세요.</span>
                     			</div>
                     		</div>
                     		<div class="form_section">
@@ -82,6 +84,7 @@
                     			</div>
                     			<div class="form_section_content">
                     				<input name="authorIntro" type="text">
+                    				<span id="warn_authorIntro">작가 소개를 입력 해주세요.</span>
                     			</div>
                     		</div>
                    		</form>
@@ -139,7 +142,54 @@
 
 /* 등록 버튼 */
 $("#enrollBtn").click(function(){	
-	$("#enrollForm").submit();
+	/* 검사 통과 유무 변수 */
+	let nameCheck = false;			// 작가 이름
+	let nationCheck = false;		// 소속 국가
+	let introCheck = false;			// 작가 소개	
+
+	/* 입력값 변수 */
+	let authorName = $('input[name=authorName]').val();		// 작가 이름
+	let nationId = $('select[name=nationId]').val();		// 소속 국가
+	let authorIntro = $('input[name=authorIntro]').val();	// 작가 소개
+	/* 공란 경고 span태그 */
+	let wAuthorName = $('#warn_authorName');
+	let wNationId = $('#warn_nationId');
+	let wAuthorIntro = $('#warn_authorIntro');	
+	
+	/* 작기 이름 공란 체크 */
+	if(authorName ===''){
+		wAuthorName.css('display', 'block');
+		nameCheck = false;
+	} else{
+		wAuthorName.css('display', 'none');
+		nameCheck = true;
+	}
+	
+	/* 소속 국가 공란 체크 */
+	if(nationId ==='none'){
+		wNationId.css('display', 'block');
+		nationCheck = false;
+	} else{
+		wNationId.css('display', 'none');
+		nationCheck = true;
+	}	
+	
+	/* 작가 소개 공란 체크 */
+	if(authorIntro ===''){
+		wAuthorIntro.css('display', 'block');
+		introCheck = false;
+	} else{
+		wAuthorIntro.css('display', 'none');
+		introCheck = true;
+	}	
+	
+	/* 최종 검사 */
+	if(nameCheck && nationCheck && introCheck){
+		$("#enrollForm").submit();	
+	} else{
+		return;
+	}
+	
 });
 
 /* 취소 버튼 */

VamPa/src/main/webapp/resources/css/admin/authorEnroll.css

@@ -44,7 +44,7 @@ ul{
     height:110px;
     line-height: 110px;
     background-color: #5080bd;
-    margin-bottom:15px;
+    margin-bottom: 15px;
 }
 .admin_top_wrap>span{
     margin-left: 30px;
@@ -85,7 +85,7 @@ ul{
 .admin_navi_wrap li a:visited {color: black;}
 .admin_navi_wrap li a:active {color: black;}
 .admin_navi_wrap li a:hover {color: black;}
-
+ 
 .admin_list_03{
     background-color: #c8c8c8;
 } 
@@ -96,8 +96,11 @@ ul{
     width: 80%;
     float:left;
     height: 100%;
- }
-.admin_content_subject{			/* 관리자 컨텐츠 제목 영역 */
+
+    
+}
+/* 관리자 컨텐츠 제목 영역 */
+.admin_content_subject{	
     font-size: 40px;
     font-weight: bolder;
     padding-left: 15px;
@@ -106,6 +109,65 @@ ul{
     line-height: 80px;
     color: white;	
 }
+/* 관리자 컨텐츠 메인 영역 */
+.form_section{
+	width: 95%;
+    margin-left: 2%;
+    margin-top: 20px;
+    border: 1px solid #dbdde2;
+    background-color: #efefef;	
+}
+.form_section_title{
+	padding: 20px 35px;	
+}
+.form_section_title label{
+	display: block;
+    font-size: 20px;
+    font-weight: 800;
+}
+.form_section_content{
+	padding: 20px 35px;
+    border-top: 1px solid #dbdde2;	
+}
+.form_section_content input{
+	width: 98%;
+    height: 25px;
+    font-size: 20px;
+    padding: 5px 1%;
+}
+.form_section_content select{
+	width: 98%;
+    height: 35px;
+    font-size: 20px;
+    text-align-last: center;
+}
+
+/* 입력란 공란 경고 태그 */
+.form_section_content span{	
+	display: none;
+    padding-top: 10px;
+    text-align: center;
+    color: #e05757;
+    font-weight: 300;    
+}
+
+
+/* 버튼 영역 */
+.btn_section{
+	text-align: center;
+	margin: 80px 0;
+}
+.btn{
+    min-width: 180px;
+    padding: 4px 30px;
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 40px;
+}
+.enroll_btn{
+	background-color: #dbdde2;
+	margin-left:15px;
+}
 
 /* footer navai 영역 */
 .footer_nav{
@@ -170,7 +232,6 @@ ul{
 
 
 
-
 /* float 속성 해제 */
 .clearfix{
 	clear: both;

VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/authorEnroll.jsp

@@ -62,6 +62,7 @@
                     			</div>
                     			<div class="form_section_content">
                     				<input name="authorName">
+                    				<span id="warn_authorName">작가 이름을 입력 해주세요.</span>
                     			</div>
                     		</div>
                     		<div class="form_section">
@@ -74,6 +75,7 @@
                     					<option value="01">국내</option>
                     					<option value="02">국외</option>
                     				</select>
+                    				<span id="warn_nationId">소속 국가를 선택해주세요.</span>
                     			</div>
                     		</div>
                     		<div class="form_section">
@@ -82,6 +84,7 @@
                     			</div>
                     			<div class="form_section_content">
                     				<input name="authorIntro" type="text">
+                    				<span id="warn_authorIntro">작가 소개를 입력 해주세요.</span>
                     			</div>
                     		</div>
                    		</form>
@@ -139,7 +142,54 @@
 
 /* 등록 버튼 */
 $("#enrollBtn").click(function(){	
-	$("#enrollForm").submit();
+	/* 검사 통과 유무 변수 */
+	let nameCheck = false;			// 작가 이름
+	let nationCheck = false;		// 소속 국가
+	let introCheck = false;			// 작가 소개	
+
+	/* 입력값 변수 */
+	let authorName = $('input[name=authorName]').val();		// 작가 이름
+	let nationId = $('select[name=nationId]').val();		// 소속 국가
+	let authorIntro = $('input[name=authorIntro]').val();	// 작가 소개
+	/* 공란 경고 span태그 */
+	let wAuthorName = $('#warn_authorName');
+	let wNationId = $('#warn_nationId');
+	let wAuthorIntro = $('#warn_authorIntro');	
+	
+	/* 작기 이름 공란 체크 */
+	if(authorName ===''){
+		wAuthorName.css('display', 'block');
+		nameCheck = false;
+	} else{
+		wAuthorName.css('display', 'none');
+		nameCheck = true;
+	}
+	
+	/* 소속 국가 공란 체크 */
+	if(nationId ==='none'){
+		wNationId.css('display', 'block');
+		nationCheck = false;
+	} else{
+		wNationId.css('display', 'none');
+		nationCheck = true;
+	}	
+	
+	/* 작가 소개 공란 체크 */
+	if(authorIntro ===''){
+		wAuthorIntro.css('display', 'block');
+		introCheck = false;
+	} else{
+		wAuthorIntro.css('display', 'none');
+		introCheck = true;
+	}	
+	
+	/* 최종 검사 */
+	if(nameCheck && nationCheck && introCheck){
+		$("#enrollForm").submit();	
+	} else{
+		return;
+	}
+	
 });
 
 /* 취소 버튼 */

VamPa_MySQL/src/main/webapp/resources/css/admin/authorEnroll.css

@@ -44,7 +44,7 @@ ul{
     height:110px;
     line-height: 110px;
     background-color: #5080bd;
-    margin-bottom:15px;
+    margin-bottom: 15px;
 }
 .admin_top_wrap>span{
     margin-left: 30px;
@@ -85,7 +85,7 @@ ul{
 .admin_navi_wrap li a:visited {color: black;}
 .admin_navi_wrap li a:active {color: black;}
 .admin_navi_wrap li a:hover {color: black;}
-
+ 
 .admin_list_03{
     background-color: #c8c8c8;
 } 
@@ -96,8 +96,11 @@ ul{
     width: 80%;
     float:left;
     height: 100%;
- }
-.admin_content_subject{			/* 관리자 컨텐츠 제목 영역 */
+
+    
+}
+/* 관리자 컨텐츠 제목 영역 */
+.admin_content_subject{	
     font-size: 40px;
     font-weight: bolder;
     padding-left: 15px;
@@ -106,6 +109,65 @@ ul{
     line-height: 80px;
     color: white;	
 }
+/* 관리자 컨텐츠 메인 영역 */
+.form_section{
+	width: 95%;
+    margin-left: 2%;
+    margin-top: 20px;
+    border: 1px solid #dbdde2;
+    background-color: #efefef;	
+}
+.form_section_title{
+	padding: 20px 35px;	
+}
+.form_section_title label{
+	display: block;
+    font-size: 20px;
+    font-weight: 800;
+}
+.form_section_content{
+	padding: 20px 35px;
+    border-top: 1px solid #dbdde2;	
+}
+.form_section_content input{
+	width: 98%;
+    height: 25px;
+    font-size: 20px;
+    padding: 5px 1%;
+}
+.form_section_content select{
+	width: 98%;
+    height: 35px;
+    font-size: 20px;
+    text-align-last: center;
+}
+
+/* 입력란 공란 경고 태그 */
+.form_section_content span{	
+	display: none;
+    padding-top: 10px;
+    text-align: center;
+    color: #e05757;
+    font-weight: 300;    
+}
+
+
+/* 버튼 영역 */
+.btn_section{
+	text-align: center;
+	margin: 80px 0;
+}
+.btn{
+    min-width: 180px;
+    padding: 4px 30px;
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 40px;
+}
+.enroll_btn{
+	background-color: #dbdde2;
+	margin-left:15px;
+}
 
 /* footer navai 영역 */
 .footer_nav{
@@ -170,7 +232,6 @@ ul{
 
 
 
-
 /* float 속성 해제 */
 .clearfix{
 	clear: both;