[JavaScript 문법] 41일차: 폼 이벤트 처리

폼 이벤트란?

폼 이벤트는 사용자가 폼 요소와 상호작용할 때 발생하는 이벤트를 의미합니다. 주요 폼 이벤트로는 submit, input, change, focus, blur 등이 있습니다. 폼 이벤트를 처리하면 사용자가 입력한 데이터를 검증하고, 폼 제출을 제어할 수 있습니다.

폼 제출 이벤트

submit 이벤트는 사용자가 폼을 제출할 때 발생합니다. 폼 제출 이벤트를 처리하여 기본 제출 동작을 막고, 사용자 입력을 검증하거나 서버로 데이터를 전송할 수 있습니다.

예제: 폼 제출 이벤트 처리

<form id="myForm">
  <input type="text" id="username" placeholder="Username">
  <button type="submit">Submit</button>
</form>

<script>
  let form = document.getElementById('myForm');

  form.addEventListener('submit', (event) => {
    event.preventDefault(); // 기본 제출 동작 막기
    let username = document.getElementById('username').value;
    alert('Form submitted with username: ' + username);
  });
</script>

위 예제에서는 폼이 제출될 때 기본 제출 동작을 막고, 사용자 입력 값을 알림으로 표시합니다.

입력 필드 이벤트

input 이벤트는 사용자가 입력 필드의 값을 변경할 때 발생합니다. 이 이벤트를 사용하여 실시간으로 입력 값을 처리할 수 있습니다.

예제: 입력 필드 이벤트 처리

<input type="text" id="username" placeholder="Username">

<script>
  let usernameField = document.getElementById('username');

  usernameField.addEventListener('input', (event) => {
    console.log('Current input value:', event.target.value);
  });
</script>

위 예제에서는 사용자가 입력 필드에 값을 입력할 때마다 현재 입력 값을 콘솔에 출력합니다.

유효성 검사

유효성 검사는 사용자가 입력한 데이터가 특정 조건을 만족하는지 확인하는 과정입니다. JavaScript를 사용하여 실시간으로 입력 값을 검증하고, 유효하지 않은 경우 사용자에게 피드백을 제공할 수 있습니다.

예제: 실시간 유효성 검사

<form id="myForm">
  <input type="text" id="username" placeholder="Username">
  <span id="usernameError" style="color: red; display: none;">Username is required</span>
  <button type="submit">Submit</button>
</form>

<script>
  let form = document.getElementById('myForm');
  let usernameField = document.getElementById('username');
  let usernameError = document.getElementById('usernameError');

  form.addEventListener('submit', (event) => {
    if (usernameField.value.trim() === '') {
      event.preventDefault();
      usernameError.style.display = 'inline';
    }
  });

  usernameField.addEventListener('input', () => {
    if (usernameField.value.trim() !== '') {
      usernameError.style.display = 'none';
    }
  });
</script>

위 예제에서는 폼 제출 시 사용자가 username 필드를 비워둔 경우, 제출을 막고 오류 메시지를 표시합니다. 사용자가 입력 값을 수정하면 오류 메시지를 숨깁니다.

focus와 blur 이벤트

focus 이벤트는 요소가 포커스를 받을 때 발생하고, blur 이벤트는 요소가 포커스를 잃을 때 발생합니다. 이 이벤트를 사용하여 사용자가 입력 필드에 포커스를 맞추거나 포커스를 벗어날 때 추가 처리를 할 수 있습니다.

예제: focus와 blur 이벤트 처리

<input type="text" id="username" placeholder="Username">

<script>
  let usernameField = document.getElementById('username');

  usernameField.addEventListener('focus', () => {
    usernameField.style.backgroundColor = 'lightyellow';
  });

  usernameField.addEventListener('blur', () => {
    usernameField.style.backgroundColor = '';
  });
</script>

위 예제에서는 사용자가 입력 필드에 포커스를 맞추면 배경색을 변경하고, 포커스를 벗어나면 원래 색상으로 복원합니다.

결론

폼 이벤트 처리는 사용자 입력을 검증하고 폼 제출을 제어하는 데 중요한 역할을 합니다. 이번 글에서는 폼 제출 이벤트, 입력 필드 이벤트, 유효성 검사, focus와 blur 이벤트 처리에 대해 배웠습니다. 다음 글에서는 브라우저 API에 대해 알아보겠습니다.

다음 글에서 만나요!