폼 전송하기: submit 이벤트

submit 이벤트란?

submit 이벤트는 사용자가 폼을 제출하려고 할 때 발생합니다. 주로 폼의 데이터를 검증하거나, 특정 조건에 따라 전송을 막을 때 사용합니다.

폼이 제출되는 시점

• 제출 버튼 클릭: <input type="submit"> 또는 <button type="submit"> 요소를 클릭할 때.
• Enter 키 입력: 폼 내의 인풋 필드에서 Enter 키를 누를 때.

이 두 경우 모두 폼의 submit 이벤트가 트리거됩니다.

이벤트 핸들러에서의 검증

submit 이벤트 핸들러에서는 폼 데이터의 유효성을 검증하고, 오류가 있을 경우 전송을 막을 수 있습니다. 이를 위해 event.preventDefault()를 사용합니다.

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  const input = form.querySelector('input[name="username"]');
  if (input.value.trim() === '') {
    alert('사용자 이름을 입력해주세요.');
    event.preventDefault(); // 폼 전송 막기
  }
});

submit 이벤트와 click 이벤트의 관계

인풋 필드에서 Enter 키를 눌러 폼을 제출하면 해당 폼의 제출 버튼에 click 이벤트가 발생합니다. 실제 클릭이 없었음에도 불구하고 이벤트가 발생하므로, 이벤트 핸들러를 작성할 때 이를 고려해야 합니다.

<form>
  <input type="text" name="search" placeholder="검색어를 입력하세요">
  <button type="submit" onclick="console.log('버튼 클릭 이벤트 발생')">검색</button>
</form>

submit() 메서드로 폼 전송하기

submit() 메서드를 사용하면 자바스크립트로 직접 폼을 전송할 수 있습니다.

submit() 메서드의 특징

• submit() 메서드를 호출하면 submit 이벤트가 발생하지 않습니다. 이는 개발자가 이미 필요한 처리를 했음을 의미합니다.
• 폼을 동적으로 생성하여 전송할 때 유용합니다.

동적으로 폼 생성 및 전송하기

const form = document.createElement('form');
form.method = 'POST';
form.action = '/search';

const input = document.createElement('input');
input.type = 'hidden';
input.name = 'query';
input.value = '자동 검색어';

form.appendChild(input);
document.body.appendChild(form);

form.submit();

예제: 데이터 검증 후 전송하기

<form id="emailForm">
  <label for="email">이메일 주소:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">가입하기</button>
</form>
<script>
const emailForm = document.getElementById('emailForm');

emailForm.addEventListener('submit', (event) => {
  const emailInput = emailForm.email.value;
  if (!validateEmail(emailInput)) {
    alert('유효한 이메일 주소를 입력해주세요.');
    event.preventDefault(); // 폼 전송 막기
  }
});

function validateEmail(email) {
  // 간단한 이메일 형식 검증
  return /\S+@\S+\.\S+/.test(email);
}
</script>