커스텀 에러 메시지

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 6번째.

사용자 정의 오류 메시지는 사용자가 폼 입력에서 무엇이 잘못되었는지 이해하는 데 도움을 줍니다. 폼 유효성 검사를 위해 이러한 메시지를 생성하고 표시하는 방법을 배워봅시다.

먼저, 기본적인 입력 필드와 그 옆에 메시지를 표시할 span을 만들어 보겠습니다:

<input type="text" id="username" placeholder="Enter username">
<span id="usernameError" class="error"></span>

이제 입력을 검증하고 사용자 정의 오류 메시지를 표시하기 위해 JavaScript를 추가해 보겠습니다:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    if (this.value.length < 5) {
        usernameError.textContent = "Username must be at least 5 characters long";
        usernameError.style.color = "red";
    } else {
        usernameError.textContent = "";
    }
});

사용자가 입력 필드에 타이핑할 때, 이벤트 리스너는 사용자 이름이 최소 5자 이상인지 확인합니다. 그렇지 않으면 빨간색 오류 메시지를 표시합니다.

챌린지

쉬움

이메일 입력 필드와 그 아래에 메시지 영역이 있는 페이지가 이미 준비되어 있습니다.

여러분의 과제: 이벤트 리스너 내부에서 입력값에 <strong>@</strong> 기호가 포함되어 있는지 확인하는 if–else 문을 추가하세요.

포함되어 있다면 → “Looks good!” 메시지를 표시합니다.
그렇지 않다면 → “Please enter a valid email address” 메시지를 표시합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Custom error messages</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <h2>Create Your Account</h2>
    <p class="subtitle">Join our newsletter for the latest updates</p>

    <form>
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="e.g. user@example.com">
      <span id="emailError" class="message"></span>

      <button type="button">Subscribe</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>