Cara Membuat Validasi Form Input Pendaftaran Menggunakan Javascript

Pada malam hari ini seperti biasa saya akan kembali memberikan suatu tutorial tentang koding, yaitu pemrograman dengan menggunakan Java Server Pages dengan bahasa HTML dan Javascript.

Saya akan membuat validasi inputan user agar nanti program lebih memudahkan user dalam mengisikan data dan user tidak bisa seenaknya ketika menginputkan data.

Program yang akan dibuat yaitu form inputan pendaftaran akun tertentu yang menggunakan username dan password.

Untuk membuat form pendaftaran ini kita butuh tabel dengan empat baris dan dua kolom, yang nantinya akan diisi dengan username, password, konfirmasi password, dan tombol submit. 

Buatlah sintax seperti dibawah ini

<form action="daftar" method="POST" onsubmit="return validasi(this)">

            <table border="0">

                <tbody>

                <h2>Buat Akun</h2>

                    <tr>

                        <td>User</td>

                        <td>

                            <input type="text" name="nama" value="" />

                        </td>

                    </tr>

                    <tr>

                        <td>Buat Password</td>

                        <td>

                            <input type="password" name="katasandi" value="" />

                        </td>

                    </tr>

                    <tr>

                        <td>Ketik Ulang Password</td>

                        <td>

                            <input type="password" name="katasandi2" value="" />

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <input type="submit" value="Buat Akun" />

                        </td>

                    </tr>

                </tbody>

            </table>

        </form>

Syntaxnya masih mirip-miriplah sama postingan saya sebelumnya, namun disitu ada sedikit tambahan pada bagian form yaitu onsubmit="return validasi(this)" yang berfungsi untuk memanggil function validasi yang merupakan javascriptnya sebelum pergi ke halaman Daftar.

Nah membuat function validasinya menggunakan Javascript seperti kodingan dibawah ini.

<script type="text/javascript">

function validasi(form){

  if (form.nama.value == ""){

    alert("Nama user harus diisi!");

    form.nama.focus();

    return (false);

  }else if(form.katasandi.value == ""){

      alert("Password harus diisi untuk keamanan!");

      form.katasandi.focus();

      return(false);

  }else if (form.katasandi.value.length < 6){

    alert("Panjang password minimal 6 karater!");

    form.nama.focus();

    return (false);

  }else if(form.katasandi2.value == ""){

      alert("Konfirmasi password yang dibuat!");

      form.katasandi2.focus();

      return(false);

  }else if (form.katasandi2.value != form.katasandi.value){

    alert("Password tidak sama, silahkan ulangi");

    form.nama.focus();

    return (false);

  }

return (true);

}

</script>

Disitu saya menggunakan percabangan if else untuk validasinya, ketika nama belum diisi oleh user tetapi sudah diklik Buat Akun maka akan muncul pemberitahuan bahwa username harus diisi.

                     

Begitu juga dengan password, apabila password tidak diisi maka muncul pemberitahuan ke user "Password harus diisi untuk keamanan!"

Panjang password juga harus lebih dari 5 karakter, minimal 6 karakter apabila tidak memenuhi syarat maka akan muncul peringatan "Panjang password minimal 6 karakter"

Lalu apabila pada kolom konfirmsi password belum diisi maka kan muncul peringatan "Konfirmasi password yang telah dibuat " dan apabila konfirmasinya salah akan muncul peringatan "Password tidak sama, silahkan ulangi".

Kita butuh satu halaman lagi untuk menampilkan apabila berhasil mendaftar. buatlah menggunakan servlet saja hanya tinggal melakukan perintah print kalimat tertentu agar untuk menandakan pendaftaran berhasil.

Apabila semua persyaratan sudah terpenuhi program akan memanggil halaman pendaftaran dan akan muncul peringatan "Akun Berhasil Dibuat"

Nah untuk kodingan lengkapnya bisa dilihat dibawah ini. Di copas juga boleh supaya lebih memudahkan dalam belajar.