Form bắt lỗi nhập liệu

Xem này: form trong HTML

Form là tập các ô khách gõ vào:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

• <form> bọc toàn bộ form. <input> là ô một dòng, <textarea> là ô nhiều dòng.
• <label> là nhãn của ô – nhờ for và id, chúng đi cùng nhau (bấm nhãn nhảy vào ô).
• placeholder là chữ gợi ý màu xám.
• Nút type="submit" gửi form.

Và chút CSS cho đẹp:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column xoay flexbox từ ngang sang dọc: con xếp từng hàng.

Xem này: kiểm tra bằng JavaScript

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

Thứ mới:

• submit – sự kiện “form đang được gửi.” Ta lắng nghe trên form, không phải nút.
• event.preventDefault() – “đừng làm việc bình thường.” Không có cái này, trang tải lại và script không kịp chạy.
• .value – nội dung trong ô. .trim() cắt khoảng trắng (nên ” ” tính là trống!).
• return – thoát function ngay (không cần kiểm tra tiếp).

Đến lượt bạn 💪

Thêm form hợp dự án, có kiểm tra nhập liệu:

• 🏫 Tin nhắn cho trường – tên + tin nhắn (như ví dụ).
• 🙋 Viết cho tôi – tên + tin nhắn, thêm ô “game yêu thích” cũng được.
• 🌍 Gợi ý chuyến đi – tên + “lần sau nên đi đâu và vì sao.”
• ⚽ Đăng ký tập – tên + tuổi (<input type="number">) + kiểm tra tuổi đã điền và ít nhất 6: if (age.value < 6) { ... }.

Điều cần nhớ từ bài học này

• Form: <form>, <input>, <textarea>, <label>, và sự kiện submit với preventDefault().
• .value.trim() = nội dung người dùng gõ, không kèm khoảng trắng thừa.
• Nhập liệu người dùng luôn phải kiểm tra – nền tảng lập trình an toàn.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung