😎 STS3 Spring 쇼핑몰
STS3 쇼핑몰 프로젝트[19] 상품 등록 - 유효성 검사
개발자 린다씨
2022. 8. 4. 13:56
반응형
순서
1. <span> 태그 추가
2. 변수 선언
3. 각 항목 확인
4. 최종 확인
1. <span>태그 추가
공란 시 경고글 역할을 할 <span> 태그를 추가합니다.
위치는 class 속성 값이 'input-box'인 각각의 <div> 태그 내부 제일 마지막 공간입니다.
각 <span>태그의 속성명에는 공통적으로 적용될 'ck_warn' 값과 각 <span> 태그를 구분해줄 '항목명_wanr"값을 추가했습니다.
<span class="ck_warn productName_warn">상품 명을 입력해주세요.</span>
<span class="ck_warn productPrice_warn">상품 가격을 입력해주세요.</span>
<span class="ck_warn productStock_warn">상품 재고를 입력해주세요.</span>
<span class="ck_warn productIntro_warn">상품 소개를 입력해주세요.</span>
<span class="ck_warn cateCode_warn">카테고리를 선택해주세요.</span>
"adminProduct.css" 파일에 추가한 <span> 태그에 대한 css 설정 코드를 추가합니다.
.ck_warn{ /* 입력란 공란 경고 태그 */
display: none;
padding-top: 10px;
text-align: center;
color: #e05757;
font-weight: 300;
}2. 변수 선언
'상품 등록' 동작 JavaScript 메서드에 2가지의 변수를 선언해줍니다.
첫 번째 변수는 각 항목의 통과 여부를 의미하는 변수입니다.
해당 변수를 '체크 변수'라고 하겠습니다.
/* 체크 변수 */
let productNameCk = false;
let cateCodeCk = false;
let priceCk = false;
let stockCk = false;
let introCk = false;두 번째 변수는 각 항목의 <input> 태그에 쉽게 접근하기 위해 변수를 선언 및 초기화했습니다.
/* 체크 대상 변수 */
let productName = $("input[name='product_title']").val();
let cateCode = $("select[name='kind_id']").val();
let productPrice = $("input[name='product_price']").val();
let productStock = $("input[name='product_stock']").val();
let productIntro = $(".bit p").html();3. 각 항목 확인
각 항목을 빈 공란인지 확인하는 if문을 코드를 작성합니다.
해당 if문은 공란일 경우 <span> 태그를 보이도록하고 '체크 변수'에 false값을 대입합니다.
공란이 아닐경우 <span> 태그를 숨기고 '체크 변수'에 true 값을 대입합니다.
if(productName){
$(".productName_warn").css('display','none');
productNameCk = true;
} else {
$(".productName_warn").css('display','block');
productNameCk = false;
}
if(cateCode != 'none'){
$(".cateCode_warn").css('display','none');
cateCodeCk = true;
} else {
$(".cateCode_warn").css('display','block');
cateCodeCk = false;
}
if(productPrice != 0){
$(".productPrice_warn").css('display','none');
priceCk = true;
} else {
$(".productPrice_warn").css('display','block');
priceCk = false;
}
if(productStock != 0){
$(".productStock_warn").css('display','none');
stockCk = true;
} else {
$(".productStock_warn").css('display','block');
stockCk = false;
}
if(productIntro != '<br data-cke-filler="true">'){
$(".productIntro_warn").css('display','none');
introCk = true;
} else {
$(".productIntro_warn").css('display','block');
introCk = false;
}4. 최종 확인
앞의 if문들을 통해서 각 항목의 상태에 따라 '체크 변수' 값들이 대입되어 있습니다.
해당 '체크 변수'들이 모두 true일 때 <form> 태그를 전송하는 코드가 동작하고, 한 항목이라도 false일시 '상품 등록' 버튼 메서드가 종료되도록 아래의 코드를 추가합니다.
if(productNameCk && cateCodeCk && priceCk && stockCk && introCk){
//alert('통과');
enrollForm.submit();
} else {
return false;
}insertProduct.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<title>Admin</title>
<link href="${path}/resources/css/admin_css.css" rel="stylesheet"/>
<link href="${path}/resources/css/adminProduct.css" rel="stylesheet"/>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<i class='bx bxl-c-plus-plus'></i> <span class="logo_name">SWAN</span>
</div>
<ul class="nav-links">
<li><a href="/swan"> <i class='bx bx-grid-alt'></i> <span
class="links_name">HOME</span>
</a></li>
<li><a href="/admin/admin"> <i class='bx bx-box'></i> <span
class="links_name">상품 관리</span>
</a></li>
<li><a href="/admin/orderList"> <i class='bx bx-list-ul'></i>
<span class="links_name">주문 관리</span>
</a></li>
<li><a href="/admin/adminMember"> <i
class='bx bx-pie-chart-alt-2'></i> <span class="links_name">회원
관리</span>
</a></li>
<li><a href="/admin/adminQuestion"> <i
class='bx bx-coin-stack'></i> <span class="links_name">문의사항
관리</span>
</a></li>
<li class="log_out"><a href="/member/logout.me"> <i
class='bx bx-log-out'></i> <span class="links_name">로그아웃</span>
</a></li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class='bx bx-menu sidebarBtn'></i> <span class="dashboard">상품
등록</span>
</div>
</nav>
<form action="/admin/insertProduct" method="post" id="enrollForm">
<div class="home-content">
<div class="recent-sales box">
<div class="container">
<div class="content">
<div class="user-details">
<div class="input-box">
<span class="details">상품 명</span> <input type="text"
placeholder="Product's name" name="product_title" required>
<span class="ck_warn productName_warn">상품 명을 입력해주세요.</span>
</div>
<div class="input-box">
<span class="details">상품 가격</span> <input type="text"
placeholder="Product's price" name="product_price" required>
<span class="ck_warn productPrice_warn">상품 가격을 입력해주세요.</span>
</div>
<div class="input-box">
<span class="details">상품 재고</span> <input type="text"
placeholder="Product's stock" name="product_stock" required>
<span class="ck_warn productStock_warn">상품 재고를 입력해주세요.</span>
</div>
</div>
<div class="input-box bit">
<span class="details">상품 설명</span>
<textarea placeholder="About Product" name="product_content"
required></textarea>
<span class="ck_warn productIntro_warn">상품 소개를 입력해주세요.</span>
</div>
<div>
<input type="file" class="upload-name" value="첨부파일" id ="fileItem"
placeholder="첨부파일" name="uploadFile">
<div id="uploadResult">
<!--
<div id="result_card">
<div class="imgDeleteBtn">x</div>
<img src="/display?fileName=test.png">
</div>
-->
</div>
</div>
<br>
<div class="form_section">
<div class="input-box bit">
<span class="details">상품 카테고리</span>
</div>
<div class="form_section_content">
<div class="cate_wrap">
<span>대분류</span>
<select class="cate1">
<option selected value="none">선택</option>
</select>
</div>
<div class="cate_wrap">
<span>중분류</span>
<select class="cate2" name="kind_id">
<option selected value="none">선택</option>
</select>
</div>
<span class="ck_warn cateCode_warn">카테고리를 선택해주세요.</span>
</div>
</div>
<div class="button">
<input type="button" value="취소" id="cancelBtn" />
<input type="button" value="상품 등록" id="enrollBtn" />
</div>
</div>
</div>
</div>
</div>
</form>
</section>
<script>
/* $(document).ready(function(){
console.log('${cateList}');
}); */
let enrollForm = $("#enrollForm")
/* 상품 등록 버튼 */
$("#enrollBtn").on("click", function(e) {
e.preventDefault();
/* 체크 변수 */
let productNameCk = false;
let cateCodeCk = false;
let priceCk = false;
let stockCk = false;
let introCk = false;
/* 체크 대상 변수 */
let productName = $("input[name='product_title']").val();
let cateCode = $("select[name='kind_id']").val();
let productPrice = $("input[name='product_price']").val();
let productStock = $("input[name='product_stock']").val();
let productIntro = $(".bit p").html();
if(productName){
$(".productName_warn").css('display','none');
productNameCk = true;
} else {
$(".productName_warn").css('display','block');
productNameCk = false;
}
if(cateCode != 'none'){
$(".cateCode_warn").css('display','none');
cateCodeCk = true;
} else {
$(".cateCode_warn").css('display','block');
cateCodeCk = false;
}
if(productPrice != 0){
$(".productPrice_warn").css('display','none');
priceCk = true;
} else {
$(".productPrice_warn").css('display','block');
priceCk = false;
}
if(productStock != 0){
$(".productStock_warn").css('display','none');
stockCk = true;
} else {
$(".productStock_warn").css('display','block');
stockCk = false;
}
if(productIntro != '<br data-cke-filler="true">'){
$(".productIntro_warn").css('display','none');
introCk = true;
} else {
$(".productIntro_warn").css('display','block');
introCk = false;
}
if(productNameCk && cateCodeCk && priceCk && stockCk && introCk){
//alert('통과');
enrollForm.submit();
} else {
return false;
}
});
/* 카테고리 */
let cateList = JSON.parse('${cateList}');
let cate1Array = new Array();
let cate2Array = new Array();
let cate1Obj = new Object();
let cate2Obj = new Object();
let cateSelect1 = $(".cate1");
let cateSelect2 = $(".cate2");
/* 카테고리 배열 초기화 메서드 */
function makeCateArray(obj,array,cateList, tier){
for(let i = 0; i < cateList.length; i++){
if(cateList[i].tier === tier){
obj = new Object();
obj.kind_name = cateList[i].kind_name;
obj.kind_id = cateList[i].kind_id;
obj.cateparent = cateList[i].cateparent;
array.push(obj);
}
}
}
/* 배열 초기화 */
makeCateArray(cate1Obj,cate1Array,cateList,1);
makeCateArray(cate2Obj,cate2Array,cateList,2);
$(document).ready(function(){
console.log(cate1Array);
console.log(cate2Array);
});
/* 대분류 <option> 태그 */
for(let i = 0; i < cate1Array.length; i++){
cateSelect1.append("<option value='"+cate1Array[i].kind_id+"'>" + cate1Array[i].kind_name + "</option>");
}
/* 중분류 <option> 태그 */
/*
대분류 선택 값 가져오기
=> 중분류 <option> 태그 모두 지우기
=> 중분류 기본 <option> 태그 추가
=> 대분류 선택 값과 일치하는 'cateparent'값을 가진 중분류 <option> 태그 출력
*/
$(cateSelect1).on("change",function(){
/* 대분류 선택 값을 가져오는 코드를 추가 */
let selectVal1 = $(this).find("option:selected").val();
/* 중분류 <option> 태그를 지우고 기본적인 <option> 태그를 추가하는 코드 */
cateSelect2.children().remove();
/* 대분류 선택 값과 일치하는 'cateparent'값을 가진 중분류 <option> 태그를 출력하는 코드 */
cateSelect2.append("<option value='none'>선택</option>");
for(let i = 0; i < cate2Array.length; i++){
if(selectVal1 === cate2Array[i].cateparent){
cateSelect2.append("<option value='"+cate2Array[i].kind_id+"'>" + cate2Array[i].kind_name + "</option>");
}
}// for
});
</script>
<script>
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function() {
sidebar.classList.toggle("active");
if (sidebar.classList.contains("active")) {
sidebarBtn.classList.replace("bx-menu", "bx-menu-alt-right");
} else
sidebarBtn.classList.replace("bx-menu-alt-right", "bx-menu");
};
$("#file").on('change', function() {
var fileName = $("#file").val();
$(".upload-name").val(fileName);
});
</script>
</body>
</html>유효성 검사 코드들이 정상적으로 동작하는지 테스트합니다.
반응형