모달을 이용한 폼 제출과 동적 에러 표시

모달에서 비동기가 아닌 방식으로 폼을 제출을 처리하게 되면 새로고침이 일어나게 되어 폼 제출을 처리할 때 발생하는 에러를 사용제에게 직접적으로 알려주기 어려웠다, 그래서 비동기로 폼 제출고 동시에 만약 에러가 있으면 동적으로 에러를 표시 할 수 있게 수정 하는방법을 분석해보자.

 

모달 내 폼 제출 처리

 

모달 내에서 비동기 폼 제출을 구현할 때의 주요 점은, 폼 제출 후 발생할 수 있는 에러를 모달 내에서 처리하고 표시한다는 것입니다. 이를 통해 사용자는 폼을 제출한 같은 컨텍스트 내에서 문제를 해결할 수 있습니다.

이러한 문제들을 해결하기 위해, 많은 현대 웹 애플리케이션들은 AJAX(Ajax, Asynchronous JavaScript and XML)를 사용하여 사용자의 인터랙션을 더 부드럽게 만듭니다.

document.addEventListener('DOMContentLoaded', function() {  
    const smsCreateForm = document.getElementById('smsCreateForm');  

    smsCreateForm.addEventListener('submit', function(event) {  
        event.preventDefault(); // 기본 제출 이벤트 방지  
        const formData = new FormData(smsCreateForm);  

        // AJAX 요청 설정  
        fetch(smsCreateForm.action, {  
            method: 'POST',  
            body: formData  
        })  
            .then(response => response.json()) // 응답을 JSON 형식으로 변환  
            .then(data => {  
                if (data.success) {  
                    // 성공 처리 로직  
                    window.location.href = '/member/sms/list'; // 성공 후 페이지 이동  
                } else {  
                    // 에러 메시지 처리  
                    const errorContainer = document.getElementById('errorContainer');  
                    errorContainer.innerHTML = ''; // 이전 에러 메시지 초기화  
                    data.errors.forEach(error => {  
                        const errorElement = document.createElement('div');  
                        errorElement.classList.add('alert', 'alert-danger');  
                        errorElement.innerText = error;  
                        errorContainer.appendChild(errorElement);  
                    });  
                }  
            })  
            .catch(error => {  
                console.error('Failed to submit form:', error);  
            });  
    });  
});

기존 코드 기준으로 각각 해당 코드를 분석해 보도록 하겠습니다.

비동기 폼 제출의 구현

1. DOMContentLoaded 이벤트 리스너
웹 페이지가 완전히 로드되고 초기화되면, JavaScript 코드가 실행됩니다. DOMContentLoaded 이벤트는 HTML 문서와 스크립트가 로드된 후에 발생하지만, 이미지나 스타일시트 같은 다른 자원은 로드되지 않아도 발생합니다.

   document.addEventListener('DOMContentLoaded', function() {
       ...
   });

2. 폼 요소 선택 및 이벤트 리스너 설정

문서에서 특정 폼을 선택하고, 이 폼의 submit 이벤트에 대해 리스너를 추가합니다. 이 리스너는 폼이 제출될 때 실행됩니다.

   const smsCreateForm = document.getElementById('smsCreateForm');
   smsCreateForm.addEventListener('submit', function(event) {
       ...
   });

3. 이벤트 기본 동작 방지

event.preventDefault() 메소드는 폼의 기본 제출 동작을 중단시킵니다. 이는 페이지 새로고침 없이 JavaScript가 데이터를 처리할 수 있도록 합니다.

   event.preventDefault();

4. FormData 객체 생성

FormData 객체는 폼 요소 내 데이터를 쉽게 취합할 수 있게 해줍니다. 이 객체는 fetch 호출의 body로 전달될 수 있습니다.

   const formData = new FormData(smsCreateForm);

5. fetch를 이용한 AJAX 요청

fetch 함수를 사용하여 서버로 비동기 요청을 보냅니다. 이 함수는 프로미스를 반환하며, 응답 처리는 .then() 메소드를 통해 연결됩니다.

   fetch(smsCreateForm.action, {
       method: 'POST',
       body: formData
   })

6. 응답 처리 및 UI 업데이트
서버의 응답을 받아 성공 여부에 따라 적절한 UI 업데이트를 수행합니다. 성공 시 페이지를 리다이렉트하고, 실패 시 에러 메시지를 표시합니다.

   .then(response => response.json())
   .then(data => {
       if (data.success) {
           window.location.href = '/member/sms/list';
       } else {
           const errorContainer = document.getElementById('errorContainer');
           errorContainer.innerHTML = '';  // 에러 컨테이너 초기화
           data.errors.forEach(error => {
               const errorElement = document.createElement('div');
               errorElement.classList.add('alert', 'alert-danger');
               errorElement.innerText = error;
               errorContainer.appendChild(errorElement);
           });
       }
   })

7. 에러 처리
네트워크 오류나 서버 오류에 대응하여 콘솔에 로그를 출력합니다.

   .catch(error => {
       console.error('Failed to submit form:', error);
   });

이러한 접근 방식은 사용자 경험을 크게 향상시키며, 웹 애플리케이션의 반응성과 인터랙티브성을 높입니다. 폼을 비동기적으로 처리함으로써, 사용자는 데이터가 서버로 전송되는 동안에도 인터페이스를 자유롭게 사용할 수 있게 됩니다.