Colin's Blog
[javascript] 폼 필드들 간의 상호 의존성을 검사하는 방법은?

웹 폼을 만들 때, 때로는 한 필드에 입력된 값에 따라 다른 필드가 나타나거나 사라지거나, 특정한 값을 가져야 할 때가 있습니다. 이런 상호 의존성을 갖는 폼 필드들을 검사하고 처리하는 방법을 알아보겠습니다.

  1. 이벤트 리스너 사용하기:
    • 상호 의존성을 갖는 필드들의 값을 검사하고 처리하기 위해, 각 필드에 이벤트 리스너를 설정합니다.
    • 가장 흔한 이벤트는 “input” 이벤트이며, 필드 값이 변경될 때마다 이벤트가 발생합니다.
    • 이벤트 리스너에서 필드들의 값을 읽고, 필요한 처리를 수행합니다.
const field1 = document.getElementById('field1');
const field2 = document.getElementById('field2');

field1.addEventListener('input', () => {
  // field1의 값을 읽어와서 필요한 처리 수행
});

field2.addEventListener('input', () => {
  // field2의 값을 읽어와서 필요한 처리 수행
});
  1. 조건문을 사용하기:
    • 이벤트 리스너 내부에서 필드들의 값을 검사하고, 조건문을 사용하여 상황에 맞게 처리합니다.
    • 예를 들어, field1의 값이 특정 조건을 만족할 때, field2를 나타내거나 감추는 처리를 수행할 수 있습니다.
field1.addEventListener('input', () => {
  if (field1.value === '특정 조건') {
    field2.style.display = 'block'; // field2를 나타내는 처리
  } else {
    field2.style.display = 'none'; // field2를 감추는 처리
  }
});
  1. 폼 제출 시 검사하기:
    • 필드들의 값이 서로 의존적인 경우, 폼 제출 시에도 그에 맞게 검사할 수 있습니다.
    • 폼 제출 이벤트에 이벤트 리스너를 추가하고, 필드들의 값을 검사한 뒤 유효성을 판단하고 처리합니다.
const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  if (field1.value !== field2.value) {
    event.preventDefault(); // 폼 제출을 막음
    alert('field1과 field2 값이 일치하지 않습니다.'); // 사용자에게 경고 메시지 보여줌
  }
});

이렇게 폼 필드들 간의 상호 의존성을 검사하고 처리하는 방법들을 이용하면, 웹 폼을 더 유연하게 제어할 수 있습니다.

© 2018 Colin. All rights reserved.