Thông báo lỗi tùy chỉnh

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 6 trên 27.

Thông báo lỗi tùy chỉnh giúp người dùng hiểu dữ liệu họ nhập vào biểu mẫu có vấn đề gì. Hãy cùng tìm hiểu cách tạo và hiển thị thông báo cho việc xác thực biểu mẫu.

Đầu tiên, hãy tạo một trường đầu vào cơ bản và một phần tử span bên cạnh để hiển thị thông báo:

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

Bây giờ, hãy thêm JavaScript để kiểm tra đầu vào và hiển thị thông báo lỗi tùy chỉnh:

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

Khi người dùng nhập vào trường đầu vào, trình lắng nghe sự kiện kiểm tra xem tên người dùng có ít nhất 5 ký tự hay không. Nếu không, chương trình hiển thị thông báo lỗi màu đỏ.

Thử thách

Dễ

Chúng ta đã có một trang với trường nhập email và vùng hiển thị thông báo bên dưới.

Nhiệm vụ của bạn: bên trong trình lắng nghe sự kiện, thêm một câu lệnh if-else để kiểm tra xem giá trị đầu vào có chứa ký hiệu @ hay không.

Nếu có → hiển thị thông báo “Looks good!”
Nếu không → hiển thị thông báo “Please enter a valid email address”

Tự làm thử

<!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>