[📚상품 구매 사이트 3단계] 구매자 서버 만들기 - 6-3. 상품 구매하기 - 자바스크립트로 유효성 검사하기

앞의 두 게시글과 이어지는 내용이다😊

특히 이번 유효성 검사는 6-2단계가 만들어져 있어야 가능하다🤩

 

 

 

6-1 . 구매자 주문 목록 페이지 만들기

[연습📚상품 구매 사이트] 구매자 서버 만들기 - 6-1. 상품 구매하기 - 주문 목록(주문 조회) 페이

 

6-2. 구매하기 기능 만들기

[연습📚상품 구매 사이트] 구매자 서버 만들기 - 6-2. 상품 구매하기 기능 만들기

 

 

---

 

 

구매자가 상품 재고를 보고

알잘딱하게 잘 입력해서 구매하면 좋겠지만,

 

장난으로 10000개를 입력할 수도 있고

-3개라고 입력할 수도 있고

또는 0개라고 입력할 수도 있고.

아니면 아예 입력되지 않은 채로 구매하기 버튼을 누를 수도 있다.

 

그렇기 때문에 자바스크립트로 유효성 검사를 하는 기능을 추가해 보자😎

 

 

productDetail.jsp 페이지의  하단에 해당 코드를 넣어주거나,

 

<script>
            function qtyCheck() {
                let ordersQty = parseInt(document.getElementsByName("ordersQty")[0].value); // 주문수량 150
                let productQty = parseInt(document.getElementById("productQty")); //재고수량 95

                // 반복 코드 줄이기 위해 return false; 를 변수화
                let ret = false;

                console.log("orderQty : " + ordersQty);
                console.log("productQty : " + productQty);

                // 주문 수량이 undefined인지 여부
                if (ordersQty) {
                    // 주문수량이 존재함
                    // 주문수량 > 재고
                    if (ordersQty > productQty) {
                        alert("재고 수량을 초과하여 구매할 수 없습니다.");
                    }
                    // 주문수량 = 0 or 주문수량 < 0
                    else if (ordersQty === 0 || ordersQty < 0) {
                        alert("1개 이상 구매할 수 있습니다.");
                    }
                    // 그게 아니라면 true로 반환 !ret 이니까 true임
                    else {
                        ret = !ret;
                    }
                } else {
                    // 주문수량이 undefined임
                    alert("주문수량을 입력해 주세요.");
                }
                return ret;
            }
        </script>

 

 

resources 폴더 안에 js 폴더를 만들어서.

js 폴더 안에 파일로 관리해도 된다.

(폴더랑 파일이름은 자유다! jsp에 모든 코드들을 다 넣으면 복잡해 보이고 가독성이 떨어지니 따로 관리하는 것 뿐)

 

따로 static 폴더 안에 관리되는 자바스크립트를 jsp에서 불러올 땐 위 사진처럼 사용하면 된다!

(맨 아래 코드는 jsp에서 홈페이지의 하단 푸터를 불러오는 코드임)

 

---

 

🎤 코드 리뷰 🎤

(해당 페이지의 전체 코드는 맨 아래에 있음!)

 

 

우리가 유효성 체크를 하기 위해서는, 상품재고와 구매자가 입력할 input 태그를 비교해야 한다.

그러기 위해서는 해당 데이터가 있는 곳에 id나 name 값을 주어야 한다.

 

 

 

상품재고는 원래 숫자와 "개"가 붙어있었는데 숫자만 추출하기 위해서 <span>태그로 따로 나누었다.

사실 "개"는 없어도 된다🥴

자바스크립트에서 사용하기 위해 id 값을 부여했다.

 

 

ordersQty는 구매하기 기능을 만들 때 DTO와 연결하기 위해 name 속성을 이미 사용했으므로

그대로 사용하면 된다!

 

 

 

🔽 정리하면서 다시 생긴 질문거리 🔽

(GPT가 너무 잘 정리해줘서 할 말이 없네 ㅋㅋㅋㅋ)

 

 

자바스크립트의 getElementByName과 getElementById는 둘 다 DOM (Document Object Model)을 조작할 때 사용되는 메서드이다.

 

getElementByName : HTML의 name 속성의 값을 찾아 반환한다.

name은 문서 내에서 중복되어 할당될 수 있다.

 

아래의 예시를 보면 왜 위의 코드에서

getElementsByName("ordersQty")[0].value

이 부분에 [0] 이렇게 index 번호로 쓰는 지 이해가 갈 것이다.

 

나는 코드 내에서 중복되는 name 값을 주지는 않았지만,

위의 예시처럼 여러 input 태그의 name 값을 같게 사용할 수 있나보다.

그래서 getElementsByName("gender"); 라고 쓰면 male, female 둘 다 선택될 것인데,

특정하게 하나만 집고 싶으면 index 번호를 써야하는 것이다.

index는 0부터 시작하니까 첫 번째 값은 [0] 이렇게 쓰면 된다.

 

 

getElementById : HTML 요소의 ID 속성 값을 찾아 반환한다.

문서 내에서 유일한 값을 정해야 해서, 중복된 값을 할당하는 것은 안된다!!🚫

 

그래서 두 메서드의 이름에 차이가 있다보다.

getElementsByName()

getElementById()

 

name 값은 여러 개 할당할 수 있기때문에 s가 붙는다 ㅎ🤭🤭 이런 귀여운 디테일이..

 

 

(어쩐지..서로 통일하려고도 해 보고 같은 메서드를 쓰려고 오만 난리를 쳐도 잘 안되더라니..)

 

자바스크립트에서 parseInt() 메서드는 문자열을 정수로 변환하는 기능을 한다.

() 안에는 두 개의 매개변수를 가질 수 있는데,

첫 번째 인자에 문자열을 넣으면 숫자로 추출해 준다.

두 번째 인자는 '진수' 개념이기 때문에 지금은 넘어가자..💬💬

하나만 넣어도 된다..

 

 

 

그리고 return false; 이렇게 적어도 되지만

길어서 그냥 false를 ret으로 만들었다.

아래에는 ordersQty와 productQty가 제대로 넘어오는 지 확인용 코드이다.

console.log(); 의 ()안에 출력하고 싶은 내용을 입력하면

개발자 도구 Console 창에 뜰 것이다.

(System.out.println 같은 거지)

 

 

조건문이 복잡하게 생겼지만 이해하고 나면 쉽다!

이 조건문의 조건은 바로 ordersQty가 존재하느냐부터 시작한다!

ordersQty가 존재하면 초록색 박스로 함수가 타고 들어갈 것이고,

애초에 ordersQty가 존재하지 않는다면 if문의 밖으로 빠져나가 else문을 실행할 것이다.

 

ordersQty가 존재하면

1. ordersQty와 productQty를 비교해서 재고수량보다 주문수량이 더 크다면 alert 창을 띄운다.

2. 1번째 조건을 통과했다면 ordersQty(구매할 수량)을 0이나 0보다 작은 수로 입력하지 않았는 지 검사한다.

3. 위 두 조건을 다 통과했다면 올바른 값을 입력한 것이므로 true를 리턴한다. 아까 ret = false라고 했는데 !를 붙이니 true로 리턴하는 것! 여기서는 ret이 = true 값으로 바뀌가 된다.

 

결과가 어쨌든 함수 실행이 끝나면 맨 밑에 (노란색 박스) ret을 리턴해 주게 되어있다.

ret이 false일 지, true일 지는 함수 처리 결과에 따라 바뀐다.

 

 

그럼 이제 값을 정확히 구매했으니 이 form 태그의 결과를 submit 해야 한다

 

productDetail.jsp 페이지

구매하기를 누르면 form 태그가 action주소(구매하기 주소)로 submit 될 것인데 onsubmit이라는 속성도 붙어있다.

onsubmit 속성은 form이 제출될 때 실행되는 자바스크림트 함수를 지정하는 속성이다.

코드에서는 form이 제출될 때(= 즉. 구매하기 버튼을 누를 때) form의 데이터가 서버로 전송되기 전에 qtyCheck()라는 함수가 실행되어 주문 수량에 대한 유효성 검사를 실시한다.

 

근데 왜 앞에 return이라는 문구를 붙이느냐?

onsubmit 속성의 값으로 함수명만 쓰는 경우, 해당 함수의 반환값이 true인 경우에만 폼이 제출된다.

하지만 구매자가 마음대로 수량을 입력해서 qtyCheck() 함수가 true를 반환하지 않을 수도 있으므로,

명시적으로 return qtyCheck() 형태로 작성해 준 것입니다. (안 적어도 상관없다는 말)

 

이 내용이 모두 qtyCheck()라는 함수(function)의 내용이다!

 

---

 

📊 결과 확인 📊

 

 

1. 수량을 0으로 입력했을 때

수량을 0으로 입력하면, 자바스크립트에서는 ordersQty의 값이 할당되어 있지 않다(false)고 판단하여

바로 else문으로 빠지게 된다. 그렇기 때문에 아무것도 입력하지 않았을 때와 같은 결과를 낸다.

0이라 입력하면 첫 번째 조건이 false이므로 바로 else문으로 감.

 

 

 

2. 수량을 입력하지 않았을 때

 

 

3. 재고 수량보다 주문하려는 수량이 많을 때

 

 

 

 

4. 음수를 입력하였을 때

 

 

5. 사실 0이나 음수같은 경우는 input 태그에서 자체적으로 체크해 줄 수 있다.

(자바스크립트보다 쉬운 방법..)

min과 max를 속성을 이용하면 편하다

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ include file="../layout/header.jsp" %>

        <div class="center">
            <div style="margin: 20px;">
                <form type="submit" action="/order/${productId}" method="post" onsubmit="return qtyCheck();">
                    <%-- productName 과 ordersName 연결하기 --%>
                        <input name="ordersName" type="hidden" value="${product.productName}">
                        <input name="ordersPrice" type="hidden" value="${product.productPrice}">
                        <table border="1" style="width: 500px; height: 200px; text-align: center;">

                            <tr style="border: 1px solid">
                                <th style="background-color: rgb(185, 185, 185)">상품명</th>
                                <th>${product.productName}</th>
                            </tr>
                            <tr style="border: 1px solid">
                                <th style="background-color: rgb(185, 185, 185)">상품가격</th>
                                <td>${product.productPrice}원</td>
                            </tr>
                            <tr style="border: 1px solid">
                                <th style="background-color: rgb(185, 185, 185)">상품재고</th>
                                <td>
                                    <span id="productQty">${product.productQty}</span>
                                    <span>개</span>
                                </td>
                            </tr>
                        </table>

                            <%-- 로그인 했을 때만 구매하기 버튼 뜨게 하기 --%>
                            <c:choose>
                                <c:when test="${principal != null}">
                                    <div class="center" style="margin-top: 20px; text-align: center;">

                                        수량 :<input name="ordersQty" type="number" min="1" class="form-control mb-3"
                                            style="width: 200px;">
                                        <button
                                            style="width: 240px; height: 50px; margin-right: 20px; background-color: rgb(255, 210, 199);">구매하기</button>
                                    </div>
                                </c:when>

                                <c:otherwise>
                                    <div class="center" style="margin-top: 40px; text-align: center;">
                                        <h5>상품을 구매하시려면 로그인 해주세요😀</h5>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                </form>


            </div>
        </div>

        <script>
            function qtyCheck() {
                let ordersQty = parseInt(document.getElementsByName("ordersQty")[0].value); // 주문수량 150
                let productQty = parseInt(document.getElementById("productQty")); //재고수량 95

                // 반복 코드 줄이기 위해 return false; 를 변수화
                let ret = false;

                console.log("orderQty : " + ordersQty);
                console.log("productQty : " + productQty);

                // 주문 수량이 undefined인지 여부
                if (ordersQty) {
                    // 주문수량이 존재함
                    // 주문수량 > 재고
                    if (ordersQty > productQty) {
                        alert("재고 수량을 초과하여 구매할 수 없습니다.");
                    }
                    // 주문수량 = 0 or 주문수량 < 0
                    else if (ordersQty === 0 || ordersQty < 0) {
                        alert("1개 이상 구매할 수 있습니다.");
                    }
                    // 그게 아니라면 true로 반환 !ret 이니까 true임
                    else {
                        ret = !ret;
                    }
                } else {
                    // 주문수량이 undefined임
                    alert("주문수량을 입력해 주세요.");
                }
                return ret;
            }
        </script>

        <%@ include file="../layout/footer.jsp" %>