Membuat Validasi Form Tidak Boleh Kosong Javascript

Melanjutkan post membuat insert database php, kali ini kita akan menambahkan validasi form dari field yang harus diisi oleh user. Validasi ini penting, karena mencegah user melakukan kesalahan ketika mengisi form yang kita sediakan, sehingga kesalahan isian oleh user dapat diminimalisir. Intinya adalah form tersebut harus diisi oleh user secara lengkap dan tidak boleh ada yang kosong. Jika ada form yang belum diisi, maka akan muncul alert bahwa form belum diisi, sehingga user harus melengkapi isian dari form tersebut.

Validasi Form Tidak Boleh Kosong

Untuk menambahkan validasi form tidak boleh kosong, anda dapat menggunakan Javascript. Fungsi Javascript ini tidak sulit untuk digunakan. Pertama, tambahkan pada form attribut onsubmit dan berikan id pada masing-masing inputnya.

<form id="absensi" onsubmit="return validasi()" action="simpan.php" method="post">
            <p>NIM:</p><input type="text" name="nim" id="nim"/><br/>
            <p>Nama:</p><input type="text" name="nama" id="nama"/><br/>
            <p>Kelas:</p><input type="text" name="kelas" id="kelas"/><br/>
            <input type="submit" value="Simpan" maxlength="100"/>
        </form>

Kemudian, di dalam tag head di bawah tag title, tambahkanlah script berikut ini.

<script>
            function validasi(){
                var nim = document.getElementById('nim');
                var nama = document.getElementById('nama');
                var kelas = document.getElementById('kelas');

                if (harusDiisi(nim, "nim belum diisi")) {
                    if (harusDiisi(nama, "nama belum diisi")) {
                        if (harusDiisi(kelas, "kelas belum diisi")) {
                            return true;
                        };
                    };
                };
                return false;
            }

            function harusDiisi(att, msg){
                if (att.value.length == 0) {
                    alert(msg);
                    att.focus();
                    return false;
                }

                return true;
            }
        </script>

Sekarang cobalah untuk menjalankan script di atas. Jika anda membiarkan form kosong ketika menekan simpan, maka browser akan memunculkan peringatan. [caption id="attachment_2210" align="aligncenter" width="364"] Alert[/caption] Source dapat didownload di insert_database_validasi Semoga bermanfaat.