Validasi Input dengan JavaScript di CRUD PHP

Pada artikel sebelumnya kita sudah mempelajari cara validasi input CRUD PHP Mysql. sekarang kita lanjut mempelajari cara validasi input dengan javascript di CRUD PHP. selamat membaca:)

Selain validasi di sisi server (PHP), kita juga bisa menambahkan validasi di sisi klien menggunakan JavaScript. Validasi ini membantu pengguna mengisi data dengan benar sebelum dikirim ke server.

1. Menambahkan Validasi di tambah.php

Kita akan menggunakan JavaScript untuk memastikan:

• Semua input wajib diisi
• Format email harus valid
• Pesan error ditampilkan sebelum data dikirim

Kode tambah.php dengan validasi JavaScript:

<?php include 'config.php'; ?>

<h2>Tambah Data Mahasiswa</h2>

<form method="POST" onsubmit="return validateForm()" name="formTambah">

    Nama: <input type="text" name="nama" id="nama"><br>

    Email: <input type="email" name="email" id="email"><br>

    Jurusan: <input type="text" name="jurusan" id="jurusan"><br>

    <input type="submit" name="submit" value="Simpan">

</form>

<script>

function validateForm() {

    let nama = document.forms["formTambah"]["nama"].value;

    let email = document.forms["formTambah"]["email"].value;

    let jurusan = document.forms["formTambah"]["jurusan"].value;

    let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

    if (nama == "" || email == "" || jurusan == "") {

        alert("Semua field harus diisi!");

        return false;

    }

    if (!email.match(emailPattern)) {

        alert("Format email tidak valid!");

        return false;

    }

    return true;

}

</script>

<?php

if (isset($_POST['submit'])) {

    $nama = htmlspecialchars(trim($_POST['nama']));

    $email = htmlspecialchars(trim($_POST['email']));

    $jurusan = htmlspecialchars(trim($_POST['jurusan']));

    $sql = "INSERT INTO mahasiswa (nama, email, jurusan) VALUES ('$nama', '$email', '$jurusan')";

    if ($koneksi->query($sql)) {

        echo "Data berhasil ditambahkan!";

        header("Location: index.php");

    } else {

        echo "Gagal menambahkan data!";

    }

}

?>

2. Menambahkan Validasi di edit.php

Kita juga bisa menerapkan validasi JavaScript pada form edit.

Kode edit.php dengan validasi JavaScript:

<?php

include 'config.php';

$id = $_GET['id'];

$data = $koneksi->query("SELECT * FROM mahasiswa WHERE id=$id")->fetch_assoc();

?>

<h2>Edit Data Mahasiswa</h2>

<form method="POST" onsubmit="return validateForm()" name="formEdit">

    Nama: <input type="text" name="nama" id="nama" value="<?= $data['nama']; ?>"><br>

    Email: <input type="email" name="email" id="email" value="<?= $data['email']; ?>"><br>

    Jurusan: <input type="text" name="jurusan" id="jurusan" value="<?= $data['jurusan']; ?>"><br>

    <input type="submit" name="submit" value="Update">

</form>

<script>

function validateForm() {

    let nama = document.forms["formEdit"]["nama"].value;

    let email = document.forms["formEdit"]["email"].value;

    let jurusan = document.forms["formEdit"]["jurusan"].value;

    let emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

    if (nama == "" || email == "" || jurusan == "") {

        alert("Semua field harus diisi!");

        return false;

    }

    if (!email.match(emailPattern)) {

        alert("Format email tidak valid!");

        return false;

    }

    return true;

}

</script>

<?php

if (isset($_POST['submit'])) {

    $nama = htmlspecialchars(trim($_POST['nama']));

    $email = htmlspecialchars(trim($_POST['email']));

    $jurusan = htmlspecialchars(trim($_POST['jurusan']));

    $sql = "UPDATE mahasiswa SET nama='$nama', email='$email', jurusan='$jurusan' WHERE id=$id";

    if ($koneksi->query($sql)) {

        echo "Data berhasil diperbarui!";

        header("Location: index.php");

    } else {

        echo "Gagal memperbarui data!";

    }

}

?>

Kesimpulan

Dengan validasi menggunakan JavaScript, pengguna bisa mengetahui kesalahan input sebelum mengirim data ke server.

Jangan lupa follow saya untuk update lebih lanjut:

• Instagram: @zhu.code
• GitHub: @zhubailee

Semoga artikel ini dapat bermanfaat! daaa!