Membuat Validasi Form Tidak Boleh Kosong Javascript

Posted in Javascript, Thursday, January 31st, 2013, by Muhammad Fahmi Al Azhar

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.

validasi form tidak boleh kosong

Alert

Source dapat didownload diĀ insert_database_validasi

Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *