Loạt bài JavaScript cơ bản · Bài 16/18 — Mục lục học tập

Biểu mẫu là nơi dữ liệu bên ngoài đi vào chương trình. Giá trị đọc từ ô nhập thường là chuỗi, dù người dùng nhìn thấy con số. Bài này xây dựng form tính tổng để luyện quy trình đọc → chuẩn hóa → kiểm tra → xử lý → hiển thị.

Tạo biểu mẫu

Tạo trang HTML như bài 2 và đặt đoạn sau trong body:

<form id="order-form">
  <label for="quantity">Số lượng tài liệu</label>
  <input id="quantity" name="quantity" type="number" min="1" max="100" step="1" required>
  <button type="submit">Tính tổng</button>
</form>
<p id="message" role="status"></p>

label liên kết với input qua for và id. required, min, max, step cung cấp kiểm tra cơ bản của trình duyệt. Ta vẫn kiểm tra trong JavaScript để thể hiện rõ quy tắc và có thể tái sử dụng logic. Dữ liệu gửi lên hệ thống thật còn phải được kiểm tra tại máy chủ.

Lắng nghe submit

const form = document.querySelector("#order-form");
const quantityInput = document.querySelector("#quantity");
const message = document.querySelector("#message");
const unitPrice = 50000;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const raw = quantityInput.value.trim();
  const quantity = Number(raw);

  if (raw === "" || !Number.isInteger(quantity) || quantity < 1 || quantity > 100) {
    message.textContent = "Nhập số nguyên từ 1 đến 100.";
    quantityInput.focus();
    return;
  }

  const total = unitPrice * quantity;
  const formatted = new Intl.NumberFormat("vi-VN", {
    style: "currency", currency: "VND"
  }).format(total);
  message.textContent = `Tổng thanh toán: ${formatted}`;
});

Đăng ký submit trên form hỗ trợ cả bấm nút lẫn gửi bằng bàn phím. preventDefault ngăn hành vi gửi form mặc định gây điều hướng trong ví dụ chạy tại máy. Nó không có nghĩa là mọi sự kiện đều cần bị chặn.

Vì sao phải kiểm tra raw trước?

Number của chuỗi rỗng là 0. Kiểm tra raw === “” giúp phân biệt thiếu dữ liệu với con số 0. Number.isInteger kiểm tra số nguyên; giới hạn 1–100 thể hiện quy tắc của form. Với giá tiền đầu vào phức tạp, cần thống nhất định dạng thay vì tự ý xóa dấu phẩy hoặc dấu chấm mà không biết ý nghĩa.

Trải nghiệm và an toàn hiển thị

Thông báo nên nói cụ thể người dùng cần sửa gì và giữ dữ liệu để họ điều chỉnh. Dùng textContent cho thông báo thay vì chèn nội dung ô nhập vào innerHTML. Kiểm tra phía trình duyệt giúp trải nghiệm tốt hơn nhưng người dùng có thể chỉnh mã hoặc gửi yêu cầu khác; đây không phải lớp bảo vệ cho dữ liệu máy chủ.

Bài tập và gợi ý

Áp dụng giảm 10% khi số lượng từ 5 trở lên. Đặt công thức ngay sau bước kiểm tra hợp lệ:

const subtotal = unitPrice * quantity;
const discount = quantity >= 5 ? subtotal * 0.1 : 0;
const total = subtotal - discount;

Thử số lượng 1, 4, 5, 100, ô trống và -1. Với 5 tài liệu, tổng trước giảm là 250.000 và sau giảm là 225.000 đồng. Không dán thêm const total trùng tên; thay công thức cũ bằng đoạn mới.

Ghi nhớ: giá trị từ input cần được kiểm tra, không chỉ chuyển kiểu. Tách trường hợp không hợp lệ trước khi thực hiện phép tính.