Tutorial Validasi Form Menggunakan HTML Dan Javascript

Advertisement
Daftar Isi

    Jangan pernah menganggap aman apa yang di inputkan oleh user, kurang lebih begitulah pernyataan yang disampaikan jika ingin membuat sebuah aplikasi yang baik. karna kita tidak tau apakah yang di inputkan oleh user sudah benar atau salah. belum lagi kalau apa yang di input bisa membahayakan aplikasi, misalnya yang seharusnya inputan text pada kolom komentar malah disisipi script XSS attack yang membahayakan aplikasi, tentu hal ini bisa sangat fatal akibat nya.

    ada banyak jenis validasi yang bisa dimanfaatkan untuk meminimalisir bahaya yang sudah saya sebutkan diatas, tapi secara garis besar kita akan membaginya menjadi 2 bagian yang itu validasi di sisi client dan validasi di sisi server.

    pada artikel ini, saya akan fokus membahas validasi di sisi client terlebih dahulu menggunakan fitur HTML 5 dan javascript. dalam artikel ini anggaplah anda disuruh untuk membuat sebuah halaman web formulir pendaftaran siswa baru. kita tidak ingin user yang melakukan pendaftaran bisa melakukan pendaftaran dengan data kosong, sehingga kita perlu melakukan validasi setiap inputan yang diberikan.

    Membuat Halaman Form Pendaftaran

    sekarang silahkan buat sebuah file html baru dengan nama pendafaran.htm dan ketiklah script berikut :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Belajar Form Validation</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <form name="formPendaftaran" action="daftar.php" method="post">
                <div class="form-group">
                    <label>Nama</label>
                    <input type="text" name="nama" placeholder="Nama lengkap" class="form-control">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="email" placeholder="Email Aktif" class="form-control">
                    <small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk Mengirimkan Notifikasi.</small>
                </div>
                <div class="form-group">
                    <label>Jurusan</label>
                    <select name="jurusan" class="form-control">
                            <option value="0">Pilih Jurusan</option>
                            <option value="1">Jurusan Informatika</option>
                            <option value="2">Jurusan Teknik Komputer Jaringan</option>
                            <option value="3">Jurusan Multimedia</option>
                        </select>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
    </body>
    </html>

    sekarang silahkan buka file pendaftaran.html menggunakan web browser, makan akan muncul halaman seperti ini :

    sampai tahap ini kita hanya mempersiapkan form saja, belum termasuk dengan validasi.

    Validasi Form Dengan Menggunakan HTML 5

    sebenarnya kita juga bisa memanfaatkan fitur dari HTML untuk melakukan validasi sederhana seperti validasi type inputan, jumlah karakter, textbox tidak boleh kosong dan validasi lainya. sekarang kita akan melakuka modifikasi dengan menambahkan script validasi dengan HTML.

    silahkan modifikasi textbox untuk nama menjadi seperti dibawah ini

    <input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3">

    sekarang jika anda klik submit akan akan muncul validasinya, atribute reqired mencegah agar textbox tidak kosong ketika form disubmit, sedangkan maxlength memberikan batasan karakter yang bisa di input dan minxlengt sebaliknya.

    Validasi Form Dengan Javacript

    selain melakukan validasi dengan HTML, kita juga bisa memanfaatkan javascript sebagai kombinasi untuk melakukan validasi, kita akan melakukan sedikit perbaikan sebagai berikut

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title>Belajar Form Validation</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    
    <body>
    
        <div class="container">
            <form name="formPendaftaran" action="daftar.php" method="post" onsubmit="return validateForm()">
                <div class="form-group">
                    <label>Nama</label>
                    <input type="text" name="nama" placeholder="Nama lengkap" class="form-control" required maxlength="40" minlength="3">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="email" placeholder="Email Aktif" class="form-control">
                    <small id="emailHelp" class="form-text text-muted">Email Akan Digunakan Untuk Mengirimkan Notifikasi.</small>
                </div>
                <div class="form-group">
                    <label>Jurusan</label>
                    <select name="jurusan" class="form-control">
                            <option value="0">Pilih Jurusan</option>
                            <option value="1">Jurusan Informatika</option>
                            <option value="2">Jurusan Teknik Komputer Jaringan</option>
                            <option value="3">Jurusan Multimedia</option>
                        </select>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        <script>
            function validateForm() {
                if (document.forms["formPendaftaran"]["nama"].value == "") {
                    alert("Nama Tidak Boleh Kosong");
                    document.forms["formPendaftaran"]["nama"].focus();
                    return false;
                }
                if (document.forms["formPendaftaran"]["email"].value == "") {
                    alert("Email Tidak Boleh Kosong");
                    document.forms["formPendaftaran"]["email"].focus();
                    return false;
                }
                if (document.forms["formPendaftaran"]["jurusan"].selectedIndex < 1) {
                    alert("Pilih Jurusan.");
                    document.forms["formPendaftaran"]["jurusan"].focus();
                    return false;
                }
            }
        </script>
    </body>
    
    </html>

    lalu silahkan save untuk menyimpan perubahan, sekarang coba kosongkan textbox email dan klik button maka akan muncul alert box seperti gambar dibawah ini yang memberi info bahwa textbox tersebut tidak boleh kosong dan menunjutkan posisi textbox yang dimaksud dengan method .focus dari perintah javascript.

    namun salah satu kelemahan validasi di sisi client masih bisa diakali dengan memodifiasi script melalui inspect element pada browser sehingga menyebabkan validasi tidak berjalan sebagaimana mestinya. oleh karena itu dibutuhkan juga validasi pada server side yang akan kita pelajari pada artikel selanjutnya.

    Video Tutorial Validasi Form Dengan HTML Dan Javascript

    Baca Artikel Terkain Menarik Lain:

    Advertisement

    Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
    Tambah Pengetahuan
    Disqus Comments