Tutorial JavaScript untuk Mevalidasi Formulir

Formulir web adalah salah satu elemen penting dalam setiap situs atau aplikasi web, baik itu untuk pendaftaran pengguna, pengiriman komentar, atau pemesanan produk. Namun, sebelum data formulir dikirimkan ke server, sangat penting untuk memastikan bahwa data yang dimasukkan oleh pengguna valid dan memenuhi persyaratan tertentu. Di sinilah Javascript berperan penting dalam melakukan validasi formulir di sisi klien. Dalam tutorial ini, kita akan mempelajari cara menggunakan JavaScript untuk memvalidasi formulir sebelum pengiriman.

1. Mengapa Validasi Formulir Penting?

Validasi formulir sangat penting untuk beberapa alasan:

Keamanan: Memastikan data yang dimasukkan aman dan tidak berisi informasi berbahaya.
Keakuratan Data: Validasi mencegah kesalahan input, seperti alamat email yang salah atau nomor telepon yang tidak valid.
Pengalaman Pengguna: Memberikan umpan balik instan kepada pengguna, sehingga mereka dapat memperbaiki kesalahan sebelum mengirimkan formulir.

2. Mempersiapkan Formulir HTML

Sebelum kita mulai menulis kode JavaScript, pertama-tama kita perlu membuat formulir HTML yang akan divalidasi. Berikut adalah contoh formulir sederhana dengan beberapa elemen input yang umum.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validasi Formulir dengan JavaScript</title>
</head>
<body>
    <h2>Formulir Pendaftaran</h2>
    <form id="myForm" name="myForm">
        <label for="name">Nama:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="phone">Nomor Telepon:</label>
        <input type="tel" id="phone" name="phone" pattern="^\d{10}$" required><br><br>

        <input type="submit" value="Daftar">
    </form>

    <script src="script.js"></script>
</body>
</html>

Pada contoh di atas, kita memiliki formulir dengan tiga elemen input:

Nama (teks)
Email (email)
Nomor Telepon (telepon)

Sekarang kita akan menambahkan JavaScript untuk memvalidasi data yang dimasukkan ke dalam formulir ini.

3. Menambahkan JavaScript untuk Validasi

Validasi menggunakan JavaScript biasanya dilakukan dengan menambahkan event listener pada saat pengguna mengklik tombol kirim atau saat formulir akan dikirimkan. Kita dapat menggunakan fungsi onsubmit untuk menjalankan validasi ketika pengguna mencoba mengirimkan formulir.

Berikut adalah contoh kode JavaScript untuk memvalidasi formulir di atas:

document.getElementById("myForm").onsubmit = function(event) {
    let valid = true;

    // Validasi nama
    let name = document.getElementById("name").value;
    if (name == "") {
        alert("Nama tidak boleh kosong!");
        valid = false;
    }

    // Validasi email
    let email = document.getElementById("email").value;
    let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!email.match(emailPattern)) {
        alert("Alamat email tidak valid!");
        valid = false;
    }

    // Validasi nomor telepon
    let phone = document.getElementById("phone").value;
    let phonePattern = /^\d{10}$/;
    if (!phone.match(phonePattern)) {
        alert("Nomor telepon harus terdiri dari 10 digit!");
        valid = false;
    }

    // Jika validasi gagal, mencegah formulir untuk dikirimkan
    if (!valid) {
        event.preventDefault();
    }
};

4. Penjelasan Kode JavaScript

onsubmit Event Listener: Ketika pengguna mencoba mengirimkan formulir, event listener ini akan dipicu. Fungsi yang terkait dengan event ini akan memvalidasi data formulir terlebih dahulu.
Validasi Nama: Memeriksa apakah kolom nama kosong. Jika kosong, tampilkan pesan kesalahan dan set valid menjadi false.
Validasi Email: Menggunakan ekspresi reguler untuk memverifikasi apakah alamat email yang dimasukkan sesuai dengan pola alamat email yang valid. Jika tidak valid, tampilkan pesan kesalahan.
Validasi Nomor Telepon: Menggunakan ekspresi reguler untuk memeriksa apakah nomor telepon terdiri dari tepat 10 digit. Jika tidak, tampilkan pesan kesalahan.
event.preventDefault(): Jika ada kesalahan dalam validasi, kita menggunakan preventDefault() untuk mencegah pengiriman formulir.

5. Mengoptimalkan Pengalaman Pengguna JavaScript

Selain memberikan umpan balik langsung dengan alert(), Anda bisa menambahkan elemen seperti pesan kesalahan di bawah setiap input atau mengubah gaya input yang tidak valid. Berikut contoh untuk menampilkan pesan kesalahan di bawah setiap input:

if (name == "") {
    document.getElementById("nameError").innerText = "Nama tidak boleh kosong!";
    valid = false;
}

Dan di HTML:

<p id="nameError" style="color: red;"></p>

6. Menangani Formulir yang Valid

Jika semua input valid, formulir akan dikirimkan secara otomatis. Jika menggunakan event.preventDefault(), kita bisa menambahkan tindakan untuk mengirim data formulir menggunakan AJAX atau menampilkan konfirmasi.

Kesimpulan

Validasi formulir menggunakan JavaScript merupakan cara yang efektif untuk memastikan data yang dikirimkan dari sisi klien sesuai dengan format yang diinginkan sebelum diproses lebih lanjut di server. Dengan menggunakan JavaScript, Anda bisa memberikan umpan balik secara langsung kepada pengguna, meningkatkan keamanan, dan mencegah pengiriman data yang salah. Tutorial ini memberikan dasar yang kuat untuk memulai validasi formulir dasar di website Anda, dan Anda bisa menambahkannya dengan fitur lainnya untuk meningkatkan pengalaman pengguna. Kamu juga bisa menanyakan hal lainnya kepada kami https://blog.sevenmediatech.co.id/