[javascript] 입력 폼에서 입력 요소의 빈 값 체크하기

11 Dec 2023

javascript

function validateForm() {
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  
  if (name === '' || email === '') {
    alert('이름과 이메일을 모두 입력해주세요.');
    return false;
  }
  return true;
}

위 코드는 validateForm 함수를 정의하고, 이름과 이메일 입력 요소의 값을 가져와 빈 값 여부를 확인하는 방법을 보여줍니다. 이름과 이메일 중 하나라도 빈 값일 경우 사용자에게 경고 메시지를 표시하고, 폼 제출을 막습니다.

이제 이 함수를 폼의 submit 이벤트에 연결하면, 폼이 제출되기 전에 입력 요소의 빈 값 여부를 확인할 수 있습니다. 다음은 해당 함수를 사용하여 폼을 유효성 검사하는 방법을 보여줍니다:

document.getElementById('myForm').addEventListener('submit', function(event) {
  if (!validateForm()) {
    event.preventDefault();
  }
});

위 코드는 myForm이라는 폼 요소에 대해 submit 이벤트를 리스닝하고, validateForm 함수를 사용하여 유효성을 검사합니다. 유효성 검사에서 false가 반환되면 제출을 막습니다.

이렇게 함으로써, 입력 폼에서 입력 요소의 빈 값 여부를 체크하여 사용자로부터 필수 정보를 수집할 수 있습니다.