Form & Validate

Hướng tiếp cận (sử dụng JavaScript + PHP)

Mục tiêu: Xây dựng form có chức năng validate phía client (JavaScript) và xử lý gửi mail bảo mật bằng PHPMailer (SMTP).

Tài nguyên

• Design

Cấu trúc source

/form-training/
│
├── index.php
├── confirm.php
├── thanks.php
├── sendmail.php
├── /assets/
│   ├── style.css
│   └── validate.js
└── /vendor/

Luồng hoạt động

index.php → (validate.js) → confirm.php → sendmail.php → thanks.php

Yêu cầu thực hiện

1. Xây dựng giao diện form trong index.php theo thiết kế mẫu
2. Cài đặt thư viện PHPMailer thông qua Composer
3. Tìm hiểu về chức năng của form action, form method
4. Submit form bằng method POST (tuyệt đối không dùng GET)
5. Xây dựng validate bằng JavaScript (kiểm tra trước khi gửi form)
6. Nếu validate hợp lệ, chuyển hướng sang confirm.php hiển thị lại toàn bộ thông tin người dùng đã nhập (Tự xây dựng layout confirm)
7. Tại trang confirm.php, khi người dùng xác nhận gửi, thực hiện xử lý gửi mail qua sendmail.php
8. Nếu gửi mail thành công, chuyển hướng tới thanks.php
9. Nếu gửi mail thất bại, giữ nguyên dữ liệu đã nhập (không xóa form), thông báo lỗi.
10. Cài đặt SMTP cho PHPMailer để gửi mail bằng tài khoản thật
11. Kiểm tra nội dung email gửi đi đảm bảo đầy đủ tất cả các trường dữ liệu của form

Thiết lập bảo mật

1. CSRF Token

Sinh và kiểm tra token để ngăn chặn các request giả mạo (Cross-Site Request Forgery).

2. Server-side validation

Kiểm tra lại toàn bộ dữ liệu bằng PHP tại confirm.php trước khi gửi mail (phòng trường hợp người dùng bỏ qua JavaScript).

3. Honeypot Field

Thêm một trường ẩn (invisible input) để phát hiện bot tự động gửi form.

4. Time Trap

Ghi nhận thời gian bắt đầu nhập form, từ đó xác định người gửi có hợp lệ (tránh bot gửi quá nhanh).

5. Escape và Encode dữ liệu đầu ra

Mọi dữ liệu người dùng hiển thị ra HTML (ở confirm.php, thanks.php, email, v.v.) phải được xử lý bằng htmlspecialchars().

6. Cài đặt ReCaptcha

Tích hợp Google reCAPTCHA để ngăn bot tự động gửi form.