Bài 22: Xử lý form – lấy giá trị, kiểm tra, gửi dữ liệu

Tiếp tục với Bài 13 – Xử lý Form trong JavaScript. Đây là một trong những ứng dụng phổ biến nhất: bạn thu thập thông tin từ người dùng qua form, kiểm tra dữ liệu (validate), và xử lý kết quả.

---

1. Lấy dữ liệu từ form

Ví dụ 1 form cơ bản:

📋 Copy<form id="loginForm">
  <input type="text" id="username" placeholder="Tên đăng nhập" />
  <input type="password" id="password" placeholder="Mật khẩu" />
  <button type="submit">Đăng nhập</button>
</form>

Gắn sự kiện và lấy dữ liệu:

📋 Copylet form = document.getElementById("loginForm")

form.addEventListener("submit", function (e) {
  e.preventDefault()

  let username = document.getElementById("username").value
  let password = document.getElementById("password").value

  console.log("Tài khoản:", username)
  console.log("Mật khẩu:", password)
})

---

2. Kiểm tra dữ liệu (Validate)

📋 Copyif (username === "" || password === "") {
  alert("Vui lòng nhập đầy đủ thông tin")
  return
}

Bạn cũng có thể kiểm tra độ dài, định dạng email, ký tự đặc biệt…

---

3. Hiển thị lỗi ra HTML

📋 Copy<p id="error" style="color: red"></p>

📋 Copyif (username === "") {
  document.getElementById("error").innerText = "Tên không được để trống"
}

---

4. Gửi dữ liệu giả lập (console log)

📋 Copyconsole.log("Gửi lên server:", {
  username: username,
  password: password
})

Khi học AJAX/Fetch, bạn sẽ gửi thật đến server.

---

5. Reset form sau khi gửi

📋 Copyform.reset()

---

6. Giao diện học (form + js)

HTML Form	JS xử lý	Kết quả
<input id="username">	.value	Lấy tên đăng nhập
.addEventListener("submit")	e.preventDefault()	Ngăn reload
Kiểm tra rỗng	if (username === "")	Hiện lỗi

---

Tóm tắt bài 13

Bạn đã học:

• Cách lấy giá trị từ các ô input bằng .value
• Ngăn form reload với e.preventDefault()
• Kiểm tra dữ liệu hợp lệ trước khi xử lý
• Hiển thị thông báo lỗi bằng HTML
• Reset form sau khi gửi

---

Bài tập

1. Tạo form đăng ký với tên, email, password
2. Kiểm tra: tất cả phải nhập, email chứa @, password ≥ 6 ký tự
3. Hiện lỗi nếu sai, hiện thông báo nếu đúng và reset form