실전 프로젝트 - 18일차

오늘의 문제는 데이터 검색 시 공백 (띄어쓰기 2칸) 입력 방지와 keyword가 없으면 검색이 불가능하게 해야했던 것!

 

오래간만에, 프로젝트 초기의 느낌으로 돌아가 HTML을 만져야했다.

 

공백 검색의 이유는 공백 검색 시 에러가 발생하는 이유 때문에 공백 검색을 막아줘야했다.

 

코드 수정으로 바로 들어가보자.

 

기존 input 코드에서 style 뒤에 onkeyup과 onchange을 입력해준다.

<input class="search" id="search" name="query" type="text" placeholder="검색어 입력" style="width: 470px"
onkeyup="noSpaceForm(this)" onchange="noSpaceForm(this);"/>

js를 사용해 function 을 생성해준다.

    function noSpaceForm(obj) {
        let str_space = /\s{2}/; // 공백 2칸 체크
        if (str_space.exec(obj.value)) {
            alert("공백을 사용할 수 없습니다.");
            obj.focus();
            obj.value = obj.value.replace('  ', '');
            return false
        }
    }

해당 function을 사용하면 클라이언트가 공백을 2번 사용할 시 alert 창을 생성해서 2번의 공백을 입력 방지해준다.

 

추가로, Form 형식을 사용해 데이터를 주고 받았는데 이 때, input 데이터가 없으면 검색이 안되게 alert 창을 띄워주고 검색 또한 안되게 해주어야 했다.

 

기존의 form 구문에서 onsubmit 을 활용해 checkForm()을 입력하여 function을 사용하게 해준다.

<form action = "./search" name="searchData" method="get" onsubmit="return checkForm()">

checkForm() function을 생성해, html 코드에 있는 input 이 공백일 때 alert 창을 띄우고 검색이 불가능하게 해준다.

    function checkForm() {
        let f = document.searchData
        if (f.query.value === "") {
            alert("검색어를 입력해주세요.")
            return false
        }
    }

해당 부분 html 코드이다.

    <form action = "./search" name="searchData" method="get" onsubmit="return checkForm()">
        <select id="category" name="category" onchange="babyCategoryListing();" style="font-size: 13px; width:150px; height:60px;">
            <option style="color: white" selected value="">대분류</option>
        </select>

        <select id="babyCategory" name="babyCategory" style="font-size: 13px; width:150px; height:60px;">
            <option selected value="">소분류</option>
        </select>

        <input class="search" id="search" name="query" type="text" placeholder="검색어 입력" style="width: 470px" onkeyup="noSpaceForm(this)" onchange="noSpaceForm(this);"/>

        <button id="search_btn" type="submit" value="search" style="font-size: 13px; width:70px; height:60px;" onclick="search_keyword()">검색</button>
    </form>

우선은 알게 된 것을 정리하자면, 공백처리를 동시에 한 function에서 하려고 하지말고 단계별로 function을 적용하여 주면 더 간편했다.

한 번에 처리를 하려다 보니 url을 통해 query도 원하는대로 넘어가지 않았고 한참을 삽질했던 것 같다.

단계별로 하나하나 처리를 하면서 순서를 바꿔보기도 하고 다른 방법도 사용해보는게 중요하다고 느꼈다.

 

정신이 없는 상태라서 횡설수설하면서 적은 것 같은데, 추후에 다시 한 번 보면서 정리를 해봐야겠다.