사용자 지정 오류 메시지

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

Custom error messages는 user가 form input에서 무엇이 잘못되었는지 이해하는 데 도움이 됩니다. form validation을 위해 이를 어떻게 Create하고 display하는지 배워 보겠습니다.

먼저 기본 input 필드와 그 옆에 span을 만들고, 여기서 message를 display하겠습니다:

<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 = "";
    }
});

사용자가 input 필드에 입력하면, 이벤트 리스너는 username이 least 5 characters long인지 확인합니다. 그렇지 않으면 red error message를 표시합니다.

챌린지

쉬움

이메일을 위한 input 필드와 그 아래에 message 영역이 있는 페이지가 이미 있습니다.

할 일: 이벤트 리스너 내부에 input 값에 <strong>@</strong> 기호가 포함되어 있는지 확인하는 if-else statement를 추가하세요.

포함되어 있으면 → “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>