Form pendaftaran di halaman web sering gagal diam-diam. Pengguna mengisi semua kolom, menekan tombol kirim, halaman dimuat ulang, dan tidak ada penjelasan apa yang salah. Mereka hanya melihat form kosong lagi. Akibatnya, pengguna menebak-nebak dan mungkin meninggalkan halaman. Cara menampilkan pesan error validasi PHP di form yang spesifik per field menyelesaikan masalah ini, dan caranya tidak rumit.
Mengapa pesan error per field lebih membantu
Satu pesan umum seperti “Isian tidak valid” memaksa pengguna memeriksa ulang seluruh form. Mereka tidak tahu apakah yang salah adalah format email, panjang password, atau kolom yang kosong. Pesan error yang ditempatkan tepat di bawah field bermasalah memotong waktu perbaikan. Pengguna langsung melihat letak kesalahannya dan tahu apa yang harus diubah.
PHP memudahkan pendekatan ini karena validasi berjalan di server dan hasilnya bisa dikirim kembali ke halaman form. Simpan daftar error dalam array, lalu tampilkan di dekat field yang bersangkutan saat halaman dirender ulang.
Struktur dasar validasi dan penyimpanan error
Mulailah dengan menampung semua pesan error dalam satu array asosiatif. Setiap kunci mewakili nama field, dan nilainya adalah pesan yang akan ditampilkan. Pengecekan di HTML jadi sederhana: cukup periksa apakah kunci tersebut ada di array error.
$errors = [];
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$nama = trim($_POST['nama'] ?? '');
$email = trim($_POST['email'] ?? '');
if ($nama === '') {
$errors['nama'] = 'Nama wajib diisi.';
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors['email'] = 'Format email tidak valid.';
}
}
Setelah array terisi, halaman form dirender ulang dengan membawa array tersebut. Tidak perlu menyimpan error di session jika form dan proses validasi berada di file yang sama. Untuk proyek yang memisahkan proses dan tampilan, simpan sementara di session lalu hapus setelah ditampilkan.
Menampilkan pesan error di dekat field
Di dalam HTML, cetak pesan error hanya jika kunci yang sesuai ada. Bungkus pesan dalam elemen dengan kelas tertentu agar bisa diberi gaya. Berikut contoh untuk field nama dan email.
<label for="nama">Nama</label>
<input type="text" name="nama" id="nama" value="<?= htmlspecialchars($_POST['nama'] ?? '') ?>">
<?php if (isset($errors['nama'])): ?>
<span class="error"><?= htmlspecialchars($errors['nama']) ?></span>
<?php endif; ?>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
<?php if (isset($errors['email'])): ?>
<span class="error"><?= htmlspecialchars($errors['email']) ?></span>
<?php endif; ?>
Fungsi htmlspecialchars wajib dipakai saat mencetak nilai dari input pengguna, termasuk pesan error yang mungkin mengandung karakter khusus. Ini mencegah HTML injection dan menjaga tampilan tetap sesuai.
Jika ingin menampilkan ringkasan error di atas form, tambahkan blok terpisah yang mengecek apakah array error tidak kosong. Ringkasan ini membantu pengguna yang memakai pembaca layar karena mereka bisa langsung mengetahui ada berapa kesalahan sebelum menelusuri field satu per satu.
Menjaga nilai input tetap terisi setelah gagal validasi
Pengguna akan frustrasi jika harus mengetik ulang semua data hanya karena satu field salah. Saat merender ulang form, isi kembali atribut value dengan data yang sebelumnya dikirim. Untuk field seperti password, jangan pernah mengisi ulang nilai aslinya demi keamanan. Cukup tampilkan pesan error dan biarkan pengguna mengetik ulang password.
Untuk textarea, letakkan nilai dari $_POST di antara tag pembuka dan penutup. Untuk select, bandingkan nilai yang tersimpan dengan setiap opsi dan tambahkan atribut selected pada opsi yang cocok.
Memberi gaya pada pesan error dengan CSS
Pesan error perlu terlihat jelas tanpa mengganggu keterbacaan form. Warna merah sudah umum, tetapi pastikan kontrasnya cukup terhadap latar belakang. Ukuran font sedikit lebih kecil dari teks input dan jarak atas yang tipis membuat pesan menyatu dengan field terkait.
.error {
display: block;
margin-top: 4px;
font-size: 0.875rem;
color: #b42318;
}
input.invalid {
border-color: #b42318;
outline-color: #b42318;
}
Tambahkan kelas invalid pada input yang bermasalah agar border-nya ikut berubah. Ini memberi petunjuk visual tambahan selain teks. Jangan mengandalkan warna saja karena sebagian pengguna mungkin tidak dapat membedakannya.
Menangani error yang tidak terduga
Validasi field bukan satu-satunya sumber masalah. Koneksi database bisa gagal, query bisa error, atau file yang diunggah melebihi batas. Untuk kasus seperti ini, tampilkan pesan umum di bagian atas form dan catat detail teknisnya di log server. Pengguna tidak perlu melihat pesan SQL mentah.
Jika form melibatkan penyimpanan ke database, gunakan prepared statement untuk mencegah injeksi. Artikel Cara Mencegah SQL Injection di PHP dengan Prepared Statement membahas penerapannya secara rinci. Pastikan juga proses validasi dan penyimpanan berada dalam alur yang sama agar error tidak tertukar.
Merapikan kode validasi saat form bertambah
Form dengan banyak field cepat membuat blok validasi panjang dan berulang. Kelompokkan aturan validasi dalam array konfigurasi, lalu loop untuk memeriksa setiap field. Pola ini memudahkan penambahan field baru tanpa menyalin kode. Jika proyek sudah memiliki banyak file, terapkan juga kebiasaan menulis kode yang rapi seperti dijelaskan di Cara Menulis Kode PHP, JS, dan CSS Tetap Rapi Saat Proyek Bertambah.
Untuk form yang datanya berasal dari database, tampilan error bisa digabungkan dengan proses pengambilan data. Lihat Loop PHP: Cara Menampilkan Data dari Database dengan Rapi agar struktur HTML tetap konsisten saat menampilkan pesan di antara baris data.
Ringkasan
Pesan error validasi yang baik muncul tepat di dekat field bermasalah, menjelaskan apa yang salah dengan bahasa sederhana, dan tidak menghapus data yang sudah diisi pengguna. Simpan error dalam array asosiatif, cetak kondisional di HTML, dan amankan output dengan htmlspecialchars. Dengan begitu, pengguna tidak perlu menebak dan form Anda lebih mungkin diselesaikan.
Pertanyaan yang Sering Diajukan
Apakah pesan error sebaiknya ditampilkan di atas form atau di bawah field?
Keduanya bisa dipakai bersama. Ringkasan di atas form membantu pengguna mengetahui jumlah kesalahan, sedangkan pesan di bawah field menunjukkan letak spesifik. Jika hanya memilih satu, tempatkan pesan di bawah field karena lebih dekat dengan sumber masalah.
Bagaimana cara menyimpan pesan error agar tidak hilang setelah redirect?
Gunakan session. Simpan array error ke $_SESSION['errors'] sebelum redirect, lalu baca dan hapus setelah halaman form dirender. Pola ini umum pada aplikasi yang memisahkan proses POST dan tampilan form.
Apakah validasi HTML5 seperti atribut required cukup menggantikan validasi PHP?
Tidak. Validasi HTML5 mudah dilewati dan tidak berjalan di semua browser dengan cara yang sama. Validasi PHP tetap diperlukan karena hanya kode server yang bisa memastikan data benar sebelum diproses atau disimpan.