[jQuery] 17. form 이벤트 사용법

지난 글에서는 jQuery의 siblings(), next(), prev()를 사용해서 형제 요소를 찾는 방법을 알아봤습니다.

이번 글에서는 input, select, textarea, checkbox 같은 폼 요소에서 자주 사용하는 form 이벤트에 대해 알아보겠습니다.

form 이벤트를 알면 입력값 검사, 검색창 반응, 선택값 변경, 글자 수 세기, 체크박스 동의 확인 같은 기능을 만들 수 있습니다.

1. form 이벤트란?

form 이벤트는 사용자가 입력창에 글자를 입력하거나, 선택 박스를 바꾸거나, 폼을 제출할 때 발생하는 이벤트입니다.

대표적인 form 이벤트는 다음과 같습니다.

submit : form이 제출될 때 실행됩니다.
change : select, checkbox, radio 등의 값이 바뀔 때 실행됩니다.
focus : 입력창에 커서가 들어갔을 때 실행됩니다.
blur : 입력창에서 커서가 빠져나갔을 때 실행됩니다.
keyup : 키보드 키를 눌렀다가 뗐을 때 실행됩니다.
input : 입력값이 바뀔 때 실행됩니다.

이벤트를 잘 활용하면 사용자의 입력에 따라 화면을 자연스럽게 바꿀 수 있습니다.

2. submit 이벤트란?

submit 이벤트는 form이 제출될 때 실행되는 이벤트입니다.

로그인, 회원가입, 문의하기, 검색 폼처럼 버튼을 눌렀을 때 입력값을 확인해야 하는 화면에서 자주 사용합니다.

📌 기본 문법

$("form").on("submit", function(event) {
  event.preventDefault();

  // 제출 전에 실행할 코드
});

여기서 event.preventDefault()는 form의 기본 제출 동작을 막는 코드입니다.

기본 제출을 막아야 입력값을 먼저 검사한 뒤 필요한 동작을 직접 처리할 수 있습니다.

3. submit 기본 예제

먼저 form을 제출했을 때 alert 창을 띄우는 간단한 예제를 보겠습니다.

📌 예제 코드

<form id="loginForm">
  <input type="text" id="userId" placeholder="아이디 입력">
  <button type="submit">로그인</button>
</form>

<script>
  $("#loginForm").on("submit", function(event) {
    event.preventDefault();

    alert("form 제출 이벤트가 실행되었습니다.");
  });
</script>

📌 실행 결과

아이디 입력창과 로그인 버튼이 화면에 표시됩니다.
로그인 버튼을 클릭합니다.
form이 바로 제출되지 않고 alert 창이 표시됩니다.
event.preventDefault() 때문에 기본 제출 동작이 막힙니다.

4. submit으로 입력값 검사하기

submit 이벤트는 입력값이 비어 있는지 검사할 때 많이 사용합니다.

input 값을 가져올 때는 val()을 사용합니다.

📌 예제 코드

<form id="joinForm">
  <input type="text" id="userName" placeholder="이름 입력">
  <button type="submit">가입하기</button>
</form>

<p id="message"></p>

<script>
  $("#joinForm").on("submit", function(event) {
    event.preventDefault();

    var name = $("#userName").val().trim();

    if (name === "") {
      $("#message").text("이름을 입력해주세요.");
      return;
    }

    $("#message").text(name + "님, 입력이 완료되었습니다.");
  });
</script>

📌 실행 결과

이름을 입력하지 않고 가입하기 버튼을 클릭합니다.
"이름을 입력해주세요."라는 문구가 표시됩니다.
이름을 입력한 뒤 클릭하면 완료 문구가 표시됩니다.

5. change 이벤트란?

change 이벤트는 폼 요소의 값이 변경되었을 때 실행됩니다.

select, checkbox, radio 같은 요소에서 자주 사용합니다.

📌 기본 문법

$("선택자").on("change", function() {
  // 값이 변경되었을 때 실행할 코드
});

6. select 값 변경 감지하기

select에서 선택한 값이 바뀌면 change 이벤트가 실행됩니다.

📌 예제 코드

<select id="category">
  <option value="">카테고리 선택</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="jquery">jQuery</option>
</select>

<p id="result">선택한 값이 여기에 표시됩니다.</p>

<script>
  $("#category").on("change", function() {
    var value = $(this).val();

    $("#result").text("선택한 값: " + value);
  });
</script>

📌 실행 결과

select 박스에서 항목을 선택합니다.
선택한 option의 value 값이 화면에 표시됩니다.
선택을 바꿀 때마다 결과 문구도 바뀝니다.

7. checkbox 체크 여부 확인하기

checkbox가 체크되었는지 확인할 때는 prop("checked")를 사용합니다.

📌 예제 코드

<label>
  <input type="checkbox" id="agree">
  약관에 동의합니다
</label>

<p id="agreeResult">아직 동의하지 않았습니다.</p>

<script>
  $("#agree").on("change", function() {
    var checked = $(this).prop("checked");

    if (checked) {
      $("#agreeResult").text("동의가 완료되었습니다.");
    } else {
      $("#agreeResult").text("아직 동의하지 않았습니다.");
    }
  });
</script>

📌 실행 결과

체크박스를 클릭하면 동의 완료 문구가 표시됩니다.
체크를 해제하면 다시 동의하지 않았다는 문구가 표시됩니다.
체크 여부는 prop("checked")로 확인합니다.

8. focus 이벤트란?

focus 이벤트는 입력창에 커서가 들어갔을 때 실행됩니다.

사용자가 어떤 입력창을 작성 중인지 표시할 때 사용할 수 있습니다.

📌 예제 코드

<input type="text" id="nameInput" placeholder="이름 입력">

<script>
  $("#nameInput").on("focus", function() {
    $(this).css("border", "2px solid royalblue");
  });
</script>

📌 실행 결과

입력창을 클릭합니다.
입력창에 커서가 들어갑니다.
입력창 테두리가 파란색으로 변경됩니다.

9. blur 이벤트란?

blur 이벤트는 입력창에서 커서가 빠져나갔을 때 실행됩니다.

입력창을 벗어났을 때 값이 비어 있는지 확인하거나, 안내 문구를 보여줄 때 사용할 수 있습니다.

📌 예제 코드

<input type="text" id="emailInput" placeholder="이메일 입력">
<p id="emailMessage"></p>

<script>
  $("#emailInput").on("blur", function() {
    var email = $(this).val().trim();

    if (email === "") {
      $("#emailMessage").text("이메일을 입력해주세요.");
    } else {
      $("#emailMessage").text("입력한 이메일: " + email);
    }

    $(this).css("border", "1px solid #cccccc");
  });
</script>

📌 실행 결과

이메일 입력창을 클릭한 뒤 다른 곳을 클릭합니다.
입력값이 비어 있으면 안내 문구가 표시됩니다.
값이 있으면 입력한 이메일이 표시됩니다.

10. keyup 이벤트란?

keyup 이벤트는 키보드 키를 눌렀다가 뗐을 때 실행됩니다.

검색어 입력, 글자 수 세기, 실시간 미리보기 같은 기능을 만들 때 사용할 수 있습니다.

📌 예제 코드

<input type="text" id="searchInput" placeholder="검색어 입력">
<p id="searchResult">검색어가 여기에 표시됩니다.</p>

<script>
  $("#searchInput").on("keyup", function() {
    var keyword = $(this).val();

    $("#searchResult").text("입력한 검색어: " + keyword);
  });
</script>

📌 실행 결과

검색창에 글자를 입력합니다.
키보드에서 손을 뗄 때마다 keyup 이벤트가 실행됩니다.
입력한 검색어가 화면에 바로 표시됩니다.

11. input 이벤트로 글자 수 세기

input 이벤트는 입력값이 변경될 때 실행됩니다.

키보드 입력뿐 아니라 붙여넣기처럼 값이 바뀌는 상황도 감지할 수 있어서 글자 수 세기에 자주 사용됩니다.

📌 예제 코드

<textarea id="content" placeholder="내용을 입력하세요"></textarea>
<p>글자 수: <span id="count">0</span>자</p>

<script>
  $("#content").on("input", function() {
    var length = $(this).val().length;

    $("#count").text(length);
  });
</script>

📌 실행 결과

textarea에 글자를 입력합니다.
입력값이 바뀔 때마다 글자 수가 변경됩니다.
글자를 지우면 글자 수도 다시 줄어듭니다.

12. 입력값 길이 제한 안내하기

입력값이 너무 짧거나 너무 길 때 안내 문구를 보여줄 수 있습니다.

📌 예제 코드

<input type="text" id="nickname" placeholder="닉네임 입력">
<p id="nicknameMessage"></p>

<script>
  $("#nickname").on("input", function() {
    var nickname = $(this).val().trim();

    if (nickname.length === 0) {
      $("#nicknameMessage").text("닉네임을 입력해주세요.");
    } else if (nickname.length < 2) {
      $("#nicknameMessage").text("닉네임은 2자 이상 입력해주세요.");
    } else {
      $("#nicknameMessage").text("사용 가능한 길이입니다.");
    }
  });
</script>

📌 실행 결과

닉네임 입력창에 글자를 입력합니다.
입력값이 없으면 입력 안내 문구가 표시됩니다.
1자만 입력하면 2자 이상 입력하라는 문구가 표시됩니다.
2자 이상 입력하면 사용 가능한 길이라는 문구가 표시됩니다.

13. 전체 예제

이번에는 이름, 이메일, 카테고리, 내용, 동의 체크박스를 가진 간단한 문의 폼 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery form 이벤트</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    .field {
      display: block;
      margin-bottom: 10px;
      padding: 8px;
      width: 260px;
    }

    #message {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>jQuery form 이벤트 공부</h2>

  <form id="contactForm">
    <input type="text" id="userName" class="field" placeholder="이름 입력">

    <input type="text" id="email" class="field" placeholder="이메일 입력">

    <select id="category" class="field">
      <option value="">문의 유형 선택</option>
      <option value="study">공부 질문</option>
      <option value="error">오류 문의</option>
      <option value="etc">기타 문의</option>
    </select>

    <textarea id="content" class="field" placeholder="내용 입력"></textarea>

    <p>글자 수: <span id="count">0</span>자</p>

    <label>
      <input type="checkbox" id="agree">
      개인정보 수집에 동의합니다
    </label>

    <br><br>

    <button type="submit">보내기</button>
  </form>

  <p id="message"></p>

  <script>
    $(function() {
      $(".field").on("focus", function() {
        $(this).css("border", "2px solid royalblue");
      });

      $(".field").on("blur", function() {
        $(this).css("border", "1px solid #cccccc");
      });

      $("#category").on("change", function() {
        var category = $(this).val();

        if (category !== "") {
          $("#message").text("선택한 문의 유형: " + category);
        }
      });

      $("#content").on("input", function() {
        var length = $(this).val().length;

        $("#count").text(length);
      });

      $("#contactForm").on("submit", function(event) {
        event.preventDefault();

        var name = $("#userName").val().trim();
        var email = $("#email").val().trim();
        var category = $("#category").val();
        var content = $("#content").val().trim();
        var agree = $("#agree").prop("checked");

        if (name === "") {
          $("#message").text("이름을 입력해주세요.");
          return;
        }

        if (email === "") {
          $("#message").text("이메일을 입력해주세요.");
          return;
        }

        if (category === "") {
          $("#message").text("문의 유형을 선택해주세요.");
          return;
        }

        if (content === "") {
          $("#message").text("문의 내용을 입력해주세요.");
          return;
        }

        if (!agree) {
          $("#message").text("개인정보 수집에 동의해주세요.");
          return;
        }

        $("#message").text("문의가 정상적으로 작성되었습니다.");
      });
    });
  </script>

</body>
</html>

📌 실행 결과

입력창에 커서가 들어가면 테두리가 강조됩니다.
입력창에서 벗어나면 테두리가 원래대로 돌아옵니다.
문의 유형을 선택하면 선택한 값이 표시됩니다.
내용을 입력하면 글자 수가 실시간으로 표시됩니다.
보내기 버튼을 누르면 비어 있는 항목을 차례대로 검사합니다.
모든 항목이 입력되고 체크박스에 동의하면 완료 문구가 표시됩니다.

14. 자주 하는 실수

📌 1. submit 이벤트에서 preventDefault()를 빼먹는 경우

form은 기본적으로 제출되면 페이지가 이동하거나 새로고침될 수 있습니다.

입력값을 먼저 검사하려면 event.preventDefault()를 작성해야 합니다.

$("#form").on("submit", function(event) {
  event.preventDefault();
});

📌 2. input 값에 text()를 사용하는 경우

input, textarea, select의 값을 가져올 때는 text()가 아니라 val()을 사용합니다.

// 잘못된 예
$("#userName").text();

// 올바른 예
$("#userName").val();

📌 3. checkbox 체크 여부를 val()로 확인하는 경우

checkbox가 체크되었는지 확인할 때는 prop("checked")를 사용합니다.

var checked = $("#agree").prop("checked");

📌 4. 공백만 입력했는데 통과되는 경우

사용자가 스페이스만 입력할 수 있으므로 trim()으로 앞뒤 공백을 제거한 뒤 검사하는 것이 좋습니다.

var name = $("#userName").val().trim();

if (name === "") {
  alert("이름을 입력해주세요.");
}

📌 5. jQuery 연결을 빼먹는 경우

form 이벤트도 jQuery 기능이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

15. 핵심 정리

submit 이벤트는 form이 제출될 때 실행됩니다.
form 기본 제출을 막으려면 event.preventDefault()를 사용합니다.
change 이벤트는 select, checkbox, radio 등의 값이 바뀔 때 사용합니다.
focus 이벤트는 입력창에 커서가 들어갔을 때 실행됩니다.
blur 이벤트는 입력창에서 커서가 빠져나갔을 때 실행됩니다.
keyup 이벤트는 키보드 입력 후 손을 뗐을 때 실행됩니다.
input 이벤트는 입력값이 변경될 때 실행됩니다.
input, textarea, select 값은 val()로 가져옵니다.
checkbox 체크 여부는 prop("checked")로 확인합니다.

이번 글에서는 jQuery의 form 이벤트 사용법에 대해 알아봤습니다.

form 이벤트를 사용하면 입력값 검사, 선택값 변경 감지, 글자 수 세기, 체크박스 동의 확인 같은 기능을 만들 수 있습니다.

다음 글에서는 [jQuery] 18. Ajax 기초 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 19. Ajax로 검색 기능 만들기 (0)	2026.06.30
[jQuery] 18. Ajax 기초 사용법 (0)	2026.06.29
[jQuery] 16. siblings(), next(), prev() 사용법 (0)	2026.06.28
[jQuery] 15. parent(), children(), find() 사용법 (0)	2026.06.26
[jQuery] 14. remove(), empty() 사용법 (0)	2026.06.25