티스토리 뷰

WEB/Bootstrap

[WEB] 부트스트랩을 이용하여 폼 유효성 검사하기 / is-valid

Happyoon ~ 2021. 11. 29. 02:07
728x90
반응형

부트스트랩을 이용하여 저번 게시물의 회원가입 폼의 유효성을 검사해보자.

 

유효성 검증 조건

1. 아이디는 5~10글자

2. 관심사는 꼭 선택되도록 지정 

 

위의 두 가지 조건을 모두 만족해야 회원가입이 되도록 해보자.

아이디 html 부분 

<div class="form-floating mb-3">
	<input class="form-control" type="text" name="nick" id="nick" placeholder="닉네임 입력..."/>
    <label class="form-label" for="nick">닉네임</label>
    <div class="valid-feedback">
          	 사용가능한 닉네임 입니다.
    </div>
    <div class="invalid-feedback">
            5글자 이상 10글자 이하로 작성해 주세요.
    </div>
</div>

 

 

아이디 javascript 부분

<script>
   //닉네임의 유효성 여부를 저장할 변수를 만들고 초기값 false 부여
   let isNickValid=false;
   //관심사의 유효성 여부(선택했는지여부)를 저장할 변수를 만들고 초기값 false 부여
   let isConcernValid=false;

   // id 가 nick 인 input 요소에 input 이벤트가 일어났을때 실행할 함수 등록 
   document.querySelector("#nick").addEventListener("input", function(){
      //1. 입력한 value 값을 읽어온다.
      let inputNick=this.value;
      //2. 유효성(5글자이상 10글자 이하)을 검증한다.
      isNickValid = inputNick.length >= 5 && inputNick.length <= 10;
      //3. 유효하다면 input 요소에 is-valid 클래스 추가, 아니라면 is-invalid 클래스 추가
      if(isNickValid){
         this.classList.remove("is-invalid");
         this.classList.add("is-valid");
      }else{
         this.classList.remove("is-valid");
         this.classList.add("is-invalid");
      }
   });
<script>

 

is-valid 일 때 "사용가능한 닉네임입니다."와 함께 체크 표시

is-invalid일 때 " 5글자 이상 10글자 이하로 작성해 주세요."와 함께 x 표시

관심사 html 부분

<div class="form-floating mb-3">
         <select class="form-select" name="concern" id="concern">
            <option value="">선택</option>
            <option value="game">게임</option>
            <option value="movie">영화</option>
            <option value="etc">기타</option>
         </select>
         <label class="form-label" for="concern">관심사</label>
         <div class="invalid-feedback">
            관심사는 반드시 선택해야 합니다.
         </div>
      </div>

 

 

관심사 javascript 부분

<script>
document.querySelector("#concern").addEventListener("change", function(){
      //select 에 선택 혹은 입력한 문자열을 읽어와서
      let inputConcern=this.value;
      //길이가 0보다 큰지 확인해서 
      isConcernValid=inputConcern.length > 0;
      if(isConcernValid){
         this.classList.remove("is-invalid");
         this.classList.add("is-valid");
      }else{
         this.classList.remove("is-valid");
         this.classList.add("is-invalid");
      }
      
   });
<script>

조건을 만족하지 않으면 제출되지 않도록 설정

<script>
//폼에 submit 이벤트가 일어 났을때 실행할 함수 등록
   document.querySelector("#signupForm").addEventListener("submit", function(e){
      //만일 폼이 유효하지 않는다면 전송을 막아주기
      if(!isNickValid || !isConcernValid){
         //이벤트 객체의 함수를 이용해서 폼 전송 막아주기 
         e.preventDefault();
      }
   });
<script>

전체 코드

signup_form3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/users/signup_form3.jsp</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
<style>
   .legend-style{
      font-size: 16px;
   }
</style>
<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
   <!-- 
      signup.jsp 페이지에서 폼 전송되는 내용을 아래의 테이블에 저장되는 기능을 구현해 보세요.
      
      lan 칼럼에는 선택하지 않으면 NULL 을 넣고
      Java 를 선택하면 Java
      Java 와 Python 을 선택하면  Java,Python
      Java 와 Python 과 C++ 를 선택하면 Java,Python,C++  
      문자열이 저장되도록 하세요. 
      
      CREATE TABLE form_test(
         nick VARCHAR2(20) PRIMARY KEY,
         email CHAR(3),
         concern VARCHAR2(10),
         lan VARCHAR2(30),
         comm CLOB 
      );
    -->
   <h1>회원 가입 폼 입니다.</h1>
   <form action="signup.jsp" method="get" id="signupForm">
      <!-- 
         input 요소를 label 요소보다 먼저 배치하고 placehoder 속성도 추가해야 form-floating 이 동작한다.
       -->
      <div class="form-floating mb-3">
         <input class="form-control" type="text" name="nick" id="nick" placeholder="닉네임 입력..."/>
         <label class="form-label" for="nick">닉네임</label>
         <div class="valid-feedback">
          	 사용가능한 닉네임 입니다.
         </div>
         <div class="invalid-feedback">
            5글자 이상 10글자 이하로 작성해 주세요.
         </div>
      </div>
      <fieldset>
         <legend class="legend-style">이메일 수신여부</legend>
         <div class="btn-group mb-3">
            <input class="btn-check" id="emailYes" type="radio" name="email" value="yes" checked/>
            <label class="btn btn-outline-success btn-sm" for="emailYes">네</label>
            
            <input class="btn-check" id="emailNo" type="radio" name="email" value="no"/>
            <label class="btn btn-outline-danger btn-sm" for="emailNo">아니요</label>
         </div>   
      </fieldset>
      <div class="form-floating mb-3">
         <select class="form-select" name="concern" id="concern">
            <option value="">선택</option>
            <option value="game">게임</option>
            <option value="movie">영화</option>
            <option value="etc">기타</option>
         </select>
         <label class="form-label" for="concern">관심사</label>
         <div class="invalid-feedback">
            관심사는 반드시 선택해야 합니다.
         </div>
      </div>
      <fieldset>
         <legend class="legend-style">배우고 싶은 언어</legend>
         <div class="btn-group mb-3">
            <input class="btn-check" id="language1" type="checkbox" name="language" value="Java"/>
            <label class="btn btn-outline-secondary btn-sm" for="language1">자바</label>
            
            <input class="btn-check" id="language2" type="checkbox" name="language" value="Python"/>
            <label class="btn btn-outline-secondary btn-sm" for="language2">파이썬</label>
            
            <input class="btn-check" id="language3" type="checkbox" name="language" value="C++"/>
            <label class="btn btn-outline-secondary btn-sm" for="language3">C++</label>
         </div>
      </fieldset>
      <div class="form-floating mb-3">
         <textarea style="height:150px;" placeholder="leave comment!" class="form-control" id="comment" name="comment" ></textarea>
         <label class="form-label" for="comment">남기고 싶은말</label>
      </div>
      <button class="btn btn-success" type="submit">가입</button>
      <button class="btn btn-warning" type="reset">취소</button>
   </form>
</div>
<script>
   //닉네임의 유효성 여부를 저장할 변수를 만들고 초기값 false 부여
   let isNickValid=false;
   //관심사의 유효성 여부(선택했는지여부)를 저장할 변수를 만들고 초기값 false 부여
   let isConcernValid=false;

   // id 가 nick 인 input 요소에 input 이벤트가 일어났을때 실행할 함수 등록 
   document.querySelector("#nick").addEventListener("input", function(){
      //1. 입력한 value 값을 읽어온다.
      let inputNick=this.value;
      //2. 유효성(5글자이상 10글자 이하)을 검증한다.
      isNickValid = inputNick.length >= 5 && inputNick.length <= 10;
      //3. 유효하다면 input 요소에 is-valid 클래스 추가, 아니라면 is-invalid 클래스 추가
      if(isNickValid){
         this.classList.remove("is-invalid");
         this.classList.add("is-valid");
      }else{
         this.classList.remove("is-valid");
         this.classList.add("is-invalid");
      }
   });
   
   document.querySelector("#concern").addEventListener("change", function(){
      //select 에 선택 혹은 입력한 문자열을 읽어와서
      let inputConcern=this.value;
      //길이가 0보다 큰지 확인해서 
      isConcernValid=inputConcern.length > 0;
      if(isConcernValid){
         this.classList.remove("is-invalid");
         this.classList.add("is-valid");
      }else{
         this.classList.remove("is-valid");
         this.classList.add("is-invalid");
      }
      
   });
   
   //폼에 submit 이벤트가 일어 났을때 실행할 함수 등록
   document.querySelector("#signupForm").addEventListener("submit", function(e){
      //만일 폼이 유효하지 않는다면 전송을 막아주기
      if(!isNickValid || !isConcernValid){
         //이벤트 객체의 함수를 이용해서 폼 전송 막아주기 
         e.preventDefault();
      }
   });
</script>
</body>
</html>
반응형

'WEB > Bootstrap' 카테고리의 다른 글

[BootStrap] 로그인 폼 만들기 / 부트스트랩 examples 사용해보기  (0) 2021.11.29
[WEB] BootStrap 으로 쉽고 빠르게 디자인하기  (0) 2021.11.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함