JavaScript로 입력값에 따라 버튼 활성화·비활성화하기 (상태 기반)

입력 필드가 비어 있는지 여부에 따라 버튼을 비활성화하거나 활성화하는 방법을 알아봅니다.

웹에서 양식(form)을 작성하다 보면 필수 입력란을 모두 채우기 전까지는 제출 버튼이 동작하지 않는 경우가 많습니다. 체크박스나 라디오 버튼에도 같은 원리가 적용됩니다.

이번 글에서는 입력 필드가 비어 있는지 여부에 따라 버튼의 상태(활성화 vs 비활성화)를 제어하는 방법을 단계별로 살펴보겠습니다.

1. HTML 마크업

먼저 에디터에 다음 HTML 코드를 추가하세요.

<input class="input" type="text" placeholder="fill me" />
<button class="button">Click Me</button>

텍스트 입력 필드 하나와 클릭용 버튼 하나로 구성된 아주 간단한 구조입니다.

2. JavaScript 코드

이어서 다음 JavaScript 코드를 추가합니다.

let input = document.querySelector(".input")
let button = document.querySelector(".button")

button.disabled = true

input.addEventListener("change", stateHandle)

function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.disabled = true
  } else {
    button.disabled = false
  }
}

이제 입력 필드가 비어 있는 동안에는 버튼이 비활성화 상태로 유지되고, 사용자가 입력을 시작하는 순간 자동으로 활성화됩니다.

전체 동작 코드가 담긴 데모를 직접 실행해 보며 확인해 보세요.

3. HTML & JavaScript 코드 작동 원리

요소 선택: 먼저 HTML에서 입력 필드와 버튼 두 개의 요소를 정의합니다. 그런 다음 JavaScript로 querySelector()를 사용해 각 요소에 대한 참조를 input과 button 변수에 저장합니다. 이렇게 하면 프로그래밍 방식으로 두 요소를 자유롭게 조작할 수 있습니다.

초기 상태 설정: 기본적으로 HTML에서 버튼은 활성화(enabled) 상태입니다. disabled = true를 설정하면 버튼이 회색으로 표시되며 사용자가 클릭할 수 없는 비활성화 상태가 됩니다.

이벤트 리스너 등록: 다음으로 input 변수에 addEventListener()를 사용해 change 이벤트 핸들러를 연결합니다. 이벤트 핸들러는 요소와의 상호작용을 지속적으로 감시(watch)하는 역할을 합니다. 여기서는 사용자가 입력 필드에 타이핑하는 순간을 감지하고, 해당 이벤트가 발생할 때마다 함수를 실행하도록 합니다.

상태 처리 함수: 실행되는 함수는 stateHandle()이며, 입력 필드 안에서 변화가 일어날 때마다 호출됩니다.

함수 내부 로직은 다음과 같습니다. 입력 필드의 값이 빈 문자열(=== '')이면 버튼을 비활성화하고, 그렇지 않으면(else) 활성화합니다.

마무리

이 패턴은 회원가입 폼, 로그인 폼 등 필수 항목 검증이 필요한 거의 모든 UI에서 활용할 수 있습니다. 조건을 여러 개의 필수 입력란으로 확장하거나, input 이벤트를 사용해 실시간 반응형으로 만들 수도 있습니다.