@3/16/2023
글쓰기(편집하기) 유효성 검증
•
경고창 라이브러리 SweetAlert2 사용함
•
•
HTML
<!-- 글 등록 -->
<div class="container">
<form th:action="@{/posts}" method="post">
<!-- 제목 -->
<div class="input-group mb-3">
<span class="input-group-text">제목</span>
<input name="title" id="title" type="text" class="form-control" aria-label="title input"/>
</div>
<!-- 본문 -->
<div id="editor"></div>
<div class="d-flex">
<button type="button" class="btn btn-md btn-primary ms-auto my-3" onclick="submitPost(this)">글 등록
</button>
<a class="btn btn-md btn-outline-secondary ms-2 my-3" href="/posts" value="취소">취소</a>
</div>
<input type="hidden" name="content" id="content">
<input type="hidden" name="userId" id="userId" value="1"/> <!-- TODO - 유저 권한 기능 추가 후 변경 -->
</form>
</div>
JavaScript
복사
•
JS
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const Editor = toastui.Editor;
const editor = new Editor({
el: document.querySelector('#editor'),
height: '500px',
initialEditType: 'WYSIWYG',
previewStyle: 'vertical',
language: "ko-KR"
});
function submitPost(button) {
let form = button.closest('form');
let inputs = form.getElementsByTagName('input');
for (let input of inputs) {
if(input.name === 'content') {
input.value = editor.getHTML();
}
}
if (validatePost(form)) {
form.submit();
};
}
function validatePost(form) {
let title = form.querySelector('#title').value.trim();
let content = stripHtmlAndTrim(form.querySelector('#content').value);
if (title == '') {
Swal.fire('제목을 입력해주세요');
return false;
} else if (content == '') {
Swal.fire('내용을 입력해주세요');
return false;
}
return true;
}
function stripHtmlAndTrim(str) {
return str.replace(/<\/?[^>]+(>|$)/g, "").trim();
}
</script>
JavaScript
복사
•
게시글 편집하기도 99% 유사함
댓글 유효성 검증
•
HTML
<!-- 댓글 등록 -->
<form th:action="@{/posts/{postId}/comments/add(postId = ${post.id})}" method="post">
<textarea class="form-control w-100 mt-3" style="resize: none;" name="content" rows="3"
placeholder="댓글을 입력해주세요"></textarea>
<div class="d-flex">
<button type="button" onclick="submitComment(this)" class="btn btn-sm btn-primary ms-auto my-3 fw-bold" />댓글 등록</button>
</div>
<input type="hidden" name="userId" th:value="${post.user.id}"/>
<input type="hidden" name="postId" th:value="${post.id}"/>
</form>
<!-- 댓글 목록 -->
<p th:text="${commentListDTO.content}" id="comment" style="white-space: pre-wrap">댓글 내용</p>
<!-- 댓글 수정 템플릿 -->
<template>
<form class="input-group row mb-2 m-auto" method="post">
<textarea class="col-10" type="text" name="content" lass="form-control" rows="3" style="resize: none"
aria-label="Recipient's username with two button addons"></textarea>
<button class="btn btn-outline-secondary col-1" type="button" onclick="submitComment(this)">완료</button>
<button class="btn btn-outline-danger col-1" type="button" onclick="cancelEdit(this)">취소</button>
<input type="hidden" name="commentId"/>
</form>
</template>
JavaScript
복사
•
JS
<script th:inline="javascript">
// 댓글 작성 및 수정
function submitComment(button) {
let form = button.closest('form');
if (validateComment(form)) {
form.submit();
};
}
// 댓글 유효성 검증
function validateComment(form) {
let comment = form.getElementsByTagName('textarea')[0];
let content = stripHtmlAndTrim(comment.value);
if (content == '') {
Swal.fire('내용을 입력해주세요');
return false;
}
return true;
}
function stripHtmlAndTrim(str) {
return str.replace(/<\/?[^>]+(>|$)/g, "").trim();
}
</script>
JavaScript
복사
◦
댓글 작성 및 수정 form에서 submitComment() 함수를 호출하도록 한 후 유효성 검사를 거치도록 함
◦
textarea를 태그 이름으로 선택해서 작성과 수정 모두 유효성 검사를 일원화시킴
