Tutorial Validasi Form Menggunakan HTML Dan Javascript

Tutorial Validasi Form Menggunakan HTML Dan Javascript

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.

Source Code Bridging BPJS dengan simrs

Source Code Bridging BPJS dengan simrs tutorial php lengkap untuk bridging bpjs dengan simrs agag sulit kita dapatkan diinternet. Namun Read more

Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik

Tutorial Codeigniter Gratis Membangun Sistem Informasi Akademik Codeigniter adalah salah satu framework yang bisa digunakan untuk membuat aplikasi dengan menggunakan Read more

Download PHP Sistem Pakar Penyakit Manusia Berbasis Web

Download PHP Sistem Pakar Penyakit Manusia Berbasis Web Sistem pakar atau dalam bahasa Inggris disebut dengan Expert System adalah sebuah Read more

Tutorial Mengirim Dan Membaca Pesan Whatsapp Dengan PHP

WhatsApp Messenger merupakan aplikasi pesan lintas platform yang memungkinkan kita bertukar pesan tanpa biaya SMS, karena WhatsApp Messenger menggunakan paket Read more

© 2021 javacposjavacpos.com ALL RIGHT RESERVED