[게시판] 8. 게시판 다듬기 및 벨리데이션 체크

[게시판] 8. 게시판 다듬기 및 벨리데이션 체크

본 게시물은 아래 링크를 정리한 내용입니다.

1. 게시판 다듬기

1) board 폴더에 nav.jsp 파일 생성 후 아래 코드 추가

네비게이션 바 추가

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 목록 글 작성

2) list.jsp, readView.jsp, updateView.jsp, writeView.jsp 파일에 기존의 태그를 지우고 아래 코드 추가

<%@include file="nav.jsp" %>

2. 벨리데이션 체크하기

1) readView.jsp에 삭제 버튼에 confirm 기능 추가

// 삭제 $(".delete_btn").on("click", function(){ var deleteYN = confirm("삭제하시겠습니가?"); if(deleteYN == true){ formObj.attr("action", "/board/delete"); formObj.attr("method", "post"); formObj.submit(); } })

2) writeView.jsp에 아래 빨간 박스부분 추가

작성 버튼을 클릭시 벨리데이션을 체크하기 위한 함수로

chk라는 클래스의 i 번째가 공백이거나 null일 경우 alert로 i 번째 타이틀을 출력하는 함수다.

게시판 $(document).ready(function(){ var formObj = $("form[name='writeForm']"); $(".write_btn").on("click",function(){ if(fn_valiChk()){ return false; } formObj.attr("action","/board/write"); formObj.attr("method","post"); formObj.submit(); }); }) function fn_valiChk(){ var regForm = $("form[name='writeForm'] .chk").length; for(var i = 0;i

3) writeView.jsp에서 아래 코드처럼 수정

4) updateView.jsp에서 아래 코드 추가

$(document).ready(function(){ var formObj = $("form[name='updateForm']"); $(".cancel_btn").on("click", function(){ event.preventDefault(); location.href = "/board/list"; }) $(".update_btn").on("click", function(){ if(fn_valiChk()){ return false; } formObj.attr("action", "/board/update"); formObj.attr("method", "post"); formObj.submit(); }) }) function fn_valiChk(){ var updateForm = $("form[name='updateForm'] .chk").length; for(var i = 0; i

5) updateView.jsp에 아래 코드로 수정

3. 확인하기

1) 서버 실행 및 localhost:8080/board/list 접속

2) 네비게이션바 생성 확인

3) 글 작성시 벨리데이션 확인

4) 글 수정시 벨리데이션 확인

from http://wldwlddl59.tistory.com/53 by ccl(A) rewrite - 2021-12-16 15:28:03