Langsung ke konten utama

Membuat Validasi Mencocokkan Form Password Dengan Javascript

Seringkali kita dalam membuat sebuah program website membutuhkan sebuah inputan kedalam database yang berfungsi untuk di tampilkan (misal di website dinamis) maupun untuk fungsi validasi (misal login pada sebuah halaman website).

Salah satu contoh inputan yang penting dalam fungsi sebuah website dinamis adalah password. Nah, pada suatu kasus saat kita akan mengganti sebuah informasi kita pada website tersebut kita di minta untuk memasukkan password kita kembali untuk memvalidasi apakah yang mengganti informasi ini adalah asli Anda sendiri ataukah ada orang lain yang sengaja ingin mengganti informasi pribadi Anda (dalam konteks negatif, semisal akun Anda di hack).

Ada kalanya saat kita di minta memasukkan password tadi, kita disuruh mengulang untuk menulis lagi password yang sudah kita tulis sebelumnya untuk mengkonfirmasi apakah sudah benar atau belum. Misal password kita 123456, maka di form konfirmasi password juga di isi 123456 untuk menunjukkan bila password kita sudah benar, bila di form ke dua salah, maka akan memunculkan warning. Bagaimana cara membuatnya?

Pertama, kita buat dulu form nya.
<input type="password" id="pw1" placeholder="Password"/>
<input type="password" id="pw2" placeholder="Konfirmasi Password"/>
Sekarang, javascript nya.
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("pw1").onchange = validatePassword;
        document.getElementById("pw2").onchange = validatePassword;
    }

    function validatePassword(){
    var pass2=document.getElementById("pw2").value;
    var pass1=document.getElementById("pw1").value;
    if(pass1!=pass2)
        document.getElementById("pw2").setCustomValidity("Passwords Tidak Sama, Coba Lagi");
    else
        document.getElementById("pw2").setCustomValidity('');
    }
</script>
Untuk full code nya seperti ini gambaran nya
<!DOCTYPE html>
<html>
    <head>
        <title>Validasi</title>
    </head>
    <body>
        <form action="" method="post">
            <input type="password" id="pw1" placeholder="Password"/>
            <input type="password" id="pw2" placeholder="Konfirmasi Password"/>
            <input type="submit" value="Cek">
        </form> 
     
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("pw1").onchange = validatePassword;
                document.getElementById("pw2").onchange = validatePassword;
            }
            function validatePassword(){
                var pass2=document.getElementById("pw2").value;
                var pass1=document.getElementById("pw1").value;
                if(pass1!=pass2)
                    document.getElementById("pw2").setCustomValidity("Passwords Tidak Sama, Coba Lagi");
                else
                    document.getElementById("pw2").setCustomValidity('');
            }
        </script>
    </body>
</html>

Semoga berhasil.

Komentar

  1. Balasan
    1. Terimakasih sudah berkomentar di blog saya.
      Mohon maaf, untuk error nya di mana ya? di script nya kah atau di demo nya? Untuk demo nya di atas, mohon maaf bila tidak bisa, di karenakan fitur form action tidak di perbolehkan oleh Blogger. Terimakasih

      Hapus
  2. hasiloutputnya ko beda ya trus ga bisa jalan ga ada keluaran textnya

    BalasHapus
    Balasan
    1. Bisa di jelas kan mungkin seperti apa output / error nya.

      Untuk menggunakan script ini, secara full code Anda bisa mencoba mendownload file html buat contoh validasi di atas melalui link di bawah ini:
      https://drive.google.com/file/d/0B9CSrJFyxzl7aHVkcFpsMFNDLUk/view?usp=sharing

      semangat mencoba, semoga berhasil :)

      Hapus
  3. Hatur nuhun kang, moga berkah

    BalasHapus
    Balasan
    1. Sama sama gan, semoga bermanfaat juga buat agan :)

      Hapus
  4. berhasil gan. setelah saya coba script berjalan setelah menekan tombol simpan. jadi setelah tombol simpan di tekan maka alert akan muncul. akan tetapi ketika saya mengubah konfirmasi password akan muncul alert walaupun sudah saya masukkan sama seperti password. alert akan hilang jika saya hapus isi kotak password kemudian mengisi kotak konfirmasi. mungkin untuk saran ditambah script untuk menghapus isi dari kotak password setelah muncul alert agar alert tidak keluar berulang ulang

    BalasHapus
  5. www.atmaluhur.ac.id

    saya ada maslah bikin bloger/blogspot dan saya baru juga belajar
    cara masukin file-file di blog kita itu caranya gimna dan file sperti PDF,doc. dan lainya bisa di dowlonload org yg mengunjungi caranya gimna. klo ada solusi bisa kirim ke email saya

    1622500121@mahsisawa.atmaluhur.ac.id

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Drony - Cara Akses Ke Internet Proxy di Android Tanpa Root

Sebenarnya ini adalah cara yang sudah lama, namun saya baru tahu dan butuh cara ini saat mengetahui bahwa koneksi di kampus ITS ternyata menggunakan proxy. Sebenarnya sih kita bisa juga akses internet di jaringan kampus tanpa menggunakan proxy, yaitu dengan cara login via siakad, nah berhubung saya bukan mahasiswa sana, satu satu nya cara ya kembali ke cara lama dengan proxy.

Berhubung kantong mahasiswa yang sering masuk angin karena tidak memiliki uang untuk membeli paket, memutar otak agar tetap bisa mengakses internet jadi solusi. Mungkin untuk pengguna PC atau laptop, proxy bukan menjadi kendala yang besar karena sekarang kebanyakan aplikasi internet untuk PC sudah menyediakan fitur untuk mengeset proxy, namun beda cerita apabila kita menggunakan device smartphone seperti pada OS Android misalnya. Dahulu, kita perlu me root device agar bisa menggunakan aplikasi tunneling proxy seperti ProxyDroid, tapi masalah selanjutnya yang timbul adalah root bukanlah perkara mudah untuk sebagi…

Restore Script Yang Hilang Saat Notepad++ Stop Working

Halo Agan Sista semua, gimana kabarnya? Masih semangat belajar pemrograman kan, code writer apa yang Anda gunakan saat ini? Dari sekian banyak aplikasi writer baik itu yang gratis ataupun yang berbayar, saat ini banyak yang menggunakan aplikasi salah satunya Notepad++ di karenakan selain free juga ringan di gunakan. Namun pernahkah Anda mengalami saat yang menyebalkan dimana kita sedang asik asiknya menulis kode pemrograman dan sudah dapet banyak banget sampai beratus ratus line tiba tiba aplikasi Notepad++ tersebut Stop Working?

Mungkin untuk sebagian besar aplikasi sih tidak masalah, namun menjadi masalah besar buat pengguna Notepad++ di karenakan script yang sudah agan sista tulis banyak sampai beratus ratus line tersebut tiba tiba bisa hilang tanpa jejak, nah lo. Pasti kesel kan, dimana saat itu lagi di kejar deadline lagi.
Terus bagaimana solusi nya? Sebenarnya dari aplikasi Notepad++ sendiri sudah terdapat fitur bawaan buat mem-backup script yang hilang tadi saat aplikasi menga…

Mengukur Jarak Antar Pelabuhan Menggunakan Netpas

Halo agan sista, kali ini saya akan membagikan dan mengulas sebuah software yang sangat membantu sekali buat mahasiswa yang berkaitan dengan kelautan dan transportasi laut atau agan sista yang bekerja di bidang pelaut seperti Mualim 2 / Second officer / Second mate.

Aplikasi ini bernama Netpas Distance, sebuah software yang menurut mimin keren dan lengkap sekali fitur nya yang sangat membantu pekerjaan di bidang pelayaran, makanya sebenarnya aplikasi ini di fokus kan untuk perusahaan pelayaran.

Beberapa fitur yang di sediakan memang sangat mumpuni, antara lain :

ETAAnti PiracyPorts and Distance DatabaseCoordinates to coordinates distanceWeather ServiceSea IceRouting Point (RP)(S)ECA distanceSimple estimationVessel managerVisual route on e-world map Cara Menggunakan Netpas Pertama, download aplikasi Netpas dulu disini. Setelah itu, instal pada PC agan sista masing masing sesuai instruksi sampai selesai.

Untuk bisa menggunakan aplikasi ini kita harus mendaftar dulu di website nya untuk …