jQuery를 사용하여 입력 필드가 비어 있는지 확인

이 가이드에서는 jQuery를 사용해 텍스트 입력에 값이 있는지 확인하는 방법을 설명합니다. 예제에서는 val()로 입력값을 읽습니다. 폼을 제출하거나 서버 측 검증을 대신하는 방법은 다루지 않습니다.

jQuery의 val() 메서드로 입력값 읽기

jQuery에는 입력값이 비어 있는지 확인하는 전용 메서드가 없습니다. 인수 없이 val()를 호출하면 선택한 텍스트 입력의 현재 문자열 값을 가져옵니다. 아무것도 입력하지 않은 필드는 ""을 반환합니다. 인수를 전달하면 val()는 값을 설정하며, 이는 여기서 사용하는 getter와는 별개의 동작입니다.

JavaScript 문자열의 truthiness를 이용하면 ""과 문자가 들어 있는 문자열을 구분할 수 있습니다.

다음 예제를 실행해 보세요:

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const name = "Ada";
if (name) {
  console.log(`Hello, ${name}!`);
}

Hello, Ada!

아래 jQuery 예제에서 !$('#NameField').val()는 텍스트 입력의 값이 빈 문자열일 때 true입니다. ! 연산자는 falsy 값을 true로 바꿉니다. 이 텍스트 입력에서 해당하는 falsy 값은 val()가 반환하는 빈 문자열입니다. 브라우저 페이지 소스는 CDN에서 jQuery를 가져오는 정적 예제이며, 런타임 출력이 아닙니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Check a text input with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function () {
      $('#SubmitBtn').on('click', function () {
        if (!$('#NameField').val()) {
          alert('Please enter your name.');
        }
      });
    });
  </script>
</head>
<body>
  <label for="NameField">Please enter your name:</label>
  <input type="text" id="NameField" name="NameField">
  <button id="SubmitBtn" type="button">Submit</button>
</body>
</html>

필드가 비어 있을 때 버튼을 클릭하면 경고가 표시됩니다. 문자가 들어 있는 값을 입력하면 경고가 표시되지 않습니다. 이 예제는 입력란의 현재 텍스트만 확인하며, 확인에 성공한 뒤 애플리케이션이 무엇을 해야 하는지는 정하지 않습니다.

val().length로 입력값이 비어 있는지 확인하기

조건에 규칙을 명확하게 드러내고 싶다면 문자열의 length를 읽어 0과 비교하세요. 예를 들면 $('#NameField').val().length === 0입니다. 텍스트 입력의 값에 문자가 하나도 없으면 이 조건은 true이고, 문자가 하나 이상 있으면 false입니다. 엄격한 동등 비교 연산자(===)는 형 변환 없이 length를 숫자 0과 비교합니다.

같은 폼과 경고 동작을 유지하려면 앞의 클릭 핸들러에서 기존 조건을 이 표현식으로 바꾸면 됩니다. 이 텍스트 입력에서 val()는 문자열을 반환하므로 그 문자열의 length를 읽는 것이 적절합니다. length를 비교하면 의도한 조건이 분명해지고, 값에 부정을 적용하는 방식은 더 짧습니다. 이 입력에서는 두 방식 모두 같은 규칙을 표현합니다.

입력 규칙에 맞는 검사 방법 선택하기

공백만 들어 있는 문자열도 비어 있지 않습니다. 공백은 문자이므로 두 검사 모두 " "와 같은 값의 length가 0보다 크다고 판단합니다. 공백만 있는 입력도 거부해야 한다면 검사 전에 값을 다듬으세요. 예를 들면 $('#NameField').val().trim().length === 0으로 확인할 수 있습니다. 다듬기는 앞뒤 공백을 무시하도록 규칙을 바꾸므로 인터페이스에 그런 동작이 필요할 때만 사용하세요. 이름이나 구절 중간의 공백은 제거하지 않습니다.

간단한 텍스트 입력에서는 코드를 짧게 쓰려면 truthiness 검사를 선택하고, 0자라는 규칙을 명시하는 편이 본인이나 팀에 더 분명하다면 length 비교를 선택하세요. 선택자가 의도한 입력을 가리키는지 확인하고, 검사에 실패했을 때 사용자에게 어떻게 알릴지는 별도로 정하세요. 이런 클라이언트 측 검사는 즉각적인 피드백에 도움이 되지만, 애플리케이션에서 데이터가 처리되는 곳에서도 적절한 검증이 필요합니다.