Cara Membuat Validasi Form di PHP

Berikut adalah tutorial lengkap untuk membuat validasi form di PHP, mencakup form HTML, validasi server-side di PHP, dan validasi client-side menggunakan JavaScript.

Langkah 1: Membuat Form HTML

Form HTML berisi input yang akan divalidasi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validasi Form PHP</title>
    <style>
        .error { color: red; }
    </style>
</head>
<body>
    <h2>Form Pendaftaran</h2>
    <form action="proses.php" method="post" id="formPendaftaran">
        <label for="nama">Nama:</label>
        <input type="text" id="nama" name="nama">
        <span class="error" id="errorNama"></span>
        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <span class="error" id="errorEmail"></span>
        <br><br>

        <label for="umur">Umur:</label>
        <input type="text" id="umur" name="umur">
        <span class="error" id="errorUmur"></span>
        <br><br>

        <button type="submit">Kirim</button>
    </form>

    <script>
        // Validasi di sisi klien menggunakan JavaScript
        document.getElementById("formPendaftaran").addEventListener("submit", function(event) {
            let valid = true;

            // Validasi nama
            const nama = document.getElementById("nama").value.trim();
            if (nama.length < 3) {
                document.getElementById("errorNama").textContent = "Nama harus memiliki setidaknya 3 karakter.";
                valid = false;
            } else {
                document.getElementById("errorNama").textContent = "";
            }

            // Validasi email
            const email = document.getElementById("email").value.trim();
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
                document.getElementById("errorEmail").textContent = "Format email tidak valid.";
                valid = false;
            } else {
                document.getElementById("errorEmail").textContent = "";
            }

            // Validasi umur
            const umur = document.getElementById("umur").value.trim();
            if (!umur || isNaN(umur) || umur < 18 || umur > 60) {
                document.getElementById("errorUmur").textContent = "Umur harus berupa angka antara 18 hingga 60.";
                valid = false;
            } else {
                document.getElementById("errorUmur").textContent = "";
            }

            // Jika tidak valid, hentikan pengiriman form
            if (!valid) {
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

PHP

Langkah 2: Membuat Validasi di Sisi Server (PHP)

Buat file proses.php untuk memproses data dari form dan melakukan validasi di server.

<?php
// Inisialisasi variabel untuk menyimpan error
$errors = [];

// Mengecek apakah form telah dikirim
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Ambil data dari form dan sanitasi
    $nama = htmlspecialchars(trim($_POST['nama']));
    $email = htmlspecialchars(trim($_POST['email']));
    $umur = htmlspecialchars(trim($_POST['umur']));

    // Validasi Nama
    if (empty($nama)) {
        $errors['nama'] = "Nama tidak boleh kosong.";
    } elseif (strlen($nama) < 3) {
        $errors['nama'] = "Nama harus memiliki setidaknya 3 karakter.";
    }

    // Validasi Email
    if (empty($email)) {
        $errors['email'] = "Email tidak boleh kosong.";
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = "Format email tidak valid.";
    }

    // Validasi Umur
    if (empty($umur)) {
        $errors['umur'] = "Umur tidak boleh kosong.";
    } elseif (!is_numeric($umur)) {
        $errors['umur'] = "Umur harus berupa angka.";
    } elseif ($umur < 18 || $umur > 60) {
        $errors['umur'] = "Umur harus antara 18 hingga 60 tahun.";
    }

    // Jika tidak ada error, proses data
    if (empty($errors)) {
        echo "<h3>Form berhasil divalidasi!</h3>";
        echo "<p>Nama: $nama</p>";
        echo "<p>Email: $email</p>";
        echo "<p>Umur: $umur</p>";
    } else {
        // Tampilkan pesan error
        echo "<h3>Form gagal divalidasi:</h3>";
        foreach ($errors as $field => $error) {
            echo "<p><strong>$field:</strong> $error</p>";
        }
        echo '<a href="javascript:history.back()">Kembali ke form</a>';
    }
}
?>

PHP

Langkah 3: Penjelasan Kode

Validasi Sisi Klien:
- Menggunakan JavaScript untuk memberikan pengalaman pengguna yang lebih baik dengan memvalidasi data sebelum dikirim.
Validasi Sisi Server:
- Menggunakan PHP untuk memvalidasi data setelah dikirim untuk memastikan keamanan dan mencegah data palsu.
Fungsi yang Digunakan:
- htmlspecialchars(): Menghindari serangan XSS.
- trim(): Menghapus spasi tak perlu di awal dan akhir string.
- filter_var(): Memvalidasi format email.
- is_numeric(): Memastikan input berupa angka.
Pesan Error:
- Ditampilkan jika ada kesalahan validasi.

Hasil

Jika data valid, data akan diproses dan ditampilkan.
Jika ada kesalahan, pesan error akan ditampilkan di bawah form.

Keuntungan Pendekatan Ini

Keamanan: Validasi di sisi server melindungi dari data palsu atau serangan.
Responsivitas: Validasi sisi klien memberikan umpan balik instan kepada pengguna.
Portabilitas: Form dapat digunakan di berbagai perangkat dengan penanganan yang baik.

Semoga tutorial ini membantu! 😊