fix: alert when submit todo without title

ShanePark · Oct 12, 2024 · 2676856 · 2676856
1 parent 284fd32
commit 2676856
Showing 1 changed file with 22 additions and 2 deletions.
diff --git a/src/main/resources/templates/duty/duty.html b/src/main/resources/templates/duty/duty.html
@@ -194,7 +194,8 @@ <h5 class="modal-title" id="todo-details-title">할일 상세</h5>
             </div>
             <div class="input-group">
               <span class="input-group-text" id="todo-content-input">내용</span>
-              <textarea rows="4" class="todo-content form-control" aria-label="content" aria-labelledby="todo-content-input"
+              <textarea rows="4" class="todo-content form-control" aria-label="content"
+                        aria-labelledby="todo-content-input"
                         :readonly="!editTodoMode"></textarea>
             </div>
           </div>
@@ -233,7 +234,7 @@ <h5 class="modal-title" id="addModalLabel">할일 추가</h5>
               class="form-control todo-content"
               name="content"
               rows="4"
-              placeholder="할일 상세내용"
+              placeholder="할일 상세(선택)"
           ></textarea>
         </div>
         <div class="modal-footer">
@@ -1151,6 +1152,10 @@ <h5 class="modal-title" id="addModalLabel">할일 추가</h5>
                         const addTodoModal = document.getElementById('add-todo-modal');
                         const title = addTodoModal.querySelector('.todo-title').value;
                         const content = addTodoModal.querySelector('.todo-content').value;
+                        if (!title) {
+                            alertTodoTitle();
+                            return;
+                        }
 
                         fetch('/api/todos', {
                             method: 'POST',
@@ -1269,6 +1274,12 @@ <h5 class="modal-title" id="addModalLabel">할일 추가</h5>
                         const todoId = modal.getAttribute('data-id');
                         const title = modal.querySelector('.todo-title').value;
                         const content = modal.querySelector('.todo-content').value;
+
+                        if (!title) {
+                            alertTodoTitle();
+                            return;
+                        }
+
                         fetch(`/api/todos/${todoId}`, {
                             method: 'PUT',
                             headers: {
@@ -1340,4 +1351,13 @@ <h5 class="modal-title" id="addModalLabel">할일 추가</h5>
         return true;
     }
 
+    function alertTodoTitle() {
+        Swal.fire({
+            icon: 'error',
+            title: '할일 제목을 입력해주세요.',
+            showConfirmButton: false,
+            timer: 1500
+        });
+    }
+
 </script>