Hiển thị lại dữ liệu đã nhập – kỹ thuật cũ mà mạnh

jk5587725

By jk5587725

Cập nhật Tháng 9 23, 2025

Khi người dùng nhập thông tin vào một biểu mẫu và có sai sót (quên điền trường bắt buộc, sai định dạng…), nếu bạn bắt họ nhập lại từ đầu thì… hơi tàn nhẫn. Cảm giác như vừa viết xong một bài văn dài, nhấn nhầm nút là mất sạch. Đó chính là lý do mà kỹ thuật “hiển thị lại dữ liệu đã nhập” ra đời và vẫn sống khỏe đến ngày nay.

Đây là một kỹ thuật giao tiếp giữa người dùng và hệ thống giúp trải nghiệm tốt hơn, tăng tính chuyên nghiệp và dễ bảo trì về sau.


Mở đầu: Vì sao cần hiển thị lại dữ liệu?

Khi form được gửi đi, nếu gặp lỗi (thiếu trường, sai định dạng…), ta thường muốn:

  • Hiển thị lại form đó.
  • Giữ nguyên các giá trị mà người dùng đã nhập.
  • Kèm theo thông báo lỗi cụ thể.

Điều này giúp:

  • Tránh mất dữ liệu do reload.
  • Người dùng không bực mình vì phải nhập lại từ đầu.
  • Tăng độ tin cậy cho hệ thống.

Tư duy tổ chức: chia thành 2 phần

  1. Khi người dùng chưa gửi form: hiện form trống hoặc đã được nhập một phần (nếu dùng GET hoặc session).
  2. Khi form bị lỗi: giữ lại dữ liệu người dùng nhập, hiển thị thông báo lỗi.
  3. Khi form hợp lệ: xử lý và có thể chuyển sang trang khác hoặc thông báo thành công.

Ví dụ minh họa

Giả sử bạn có một form đơn giản:

<?php
$name = '';
$email = '';
$errors = [];

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Sanitize
    $name = trim(htmlspecialchars($_POST['name'] ?? ''));
    $email = trim(htmlspecialchars($_POST['email'] ?? ''));

    // Validate
    if ($name === '') {
        $errors[] = "Vui lòng nhập tên.";
    }

    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Email không hợp lệ.";
    }

    if (empty($errors)) {
        echo "Cảm ơn bạn, $name. Chúng tôi đã nhận được email $email.";
        // Có thể lưu vào DB hoặc redirect ở đây.
        exit;
    }
}
?>

<h2>Đăng ký nhận tin</h2>

<?php
// Hiển thị lỗi nếu có
if (!empty($errors)) {
    echo '<ul style="color:red">';
    foreach ($errors as $err) {
        echo "<li>$err</li>";
    }
    echo '</ul>';
}
?>

<form method="POST">
    <label>Tên:</label><br>
    <input type="text" name="name" value="<?= htmlspecialchars($name) ?>"><br><br>

    <label>Email:</label><br>
    <input type="email" name="email" value="<?= htmlspecialchars($email) ?>"><br><br>

    <button type="submit">Gửi</button>
</form>

Giải thích ngắn gọn

  • Lưu lại biến $name$email sau khi người dùng nhập.
  • Nếu có lỗi, form được hiển thị lại với chính các giá trị đó (value="<?= htmlspecialchars($name) ?>").
  • Không mất dữ liệu — trải nghiệm người dùng được đảm bảo.

Chú ý

  • Luôn dùng htmlspecialchars() hoặc tương đương để tránh lỗi XSS.
  • Nếu form nhiều trường, nên tách thành hàm hoặc cấu trúc dữ liệu ($_SESSION, mảng $form_data, class…).
  • Cách này cũng hữu ích cho cả khi redirect: lưu $_POST vào $_SESSION rồi hiển thị lại sau khi quay về.

Bài tập áp dụng

  1. Viết một form đăng ký có các trường: Họ tên, Email, Số điện thoại.
  2. Kiểm tra nếu trường nào bỏ trống hoặc email sai định dạng thì báo lỗi và giữ lại dữ liệu đã nhập.
  3. Khi form hợp lệ, hiển thị thông điệp cảm ơn có tên người dùng.

Kết

Kỹ thuật này có thể xem là một “best practice” bất thành văn trong các hệ thống xử lý form bằng PHP thuần. Dù sau này bạn có dùng framework, React, Vue… thì cũng đều giữ nguyên triết lý: tôn trọng dữ liệu người dùng nhập vào.

Thảo luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký nhận tin mới

Nhận bài học, tài nguyên và cơ hội việc làm qua email hàng tuần.

[global_subscribe_form]

Chúng tôi cam kết không spam. Bạn có thể hủy bất cứ lúc nào.