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.

Posting Komentar

28 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. 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
  6. terimakasih min, artikelnya cukup berguna untuk saya yang baru mempelajari tentang materi ini. disini saya bisa mengetahui cara membuat validasi form html dengan javascript. apalagi untuk saya yang kuliah di bagian komputer, artikel ini sangat membantu saya dan dapat membantu banyak orang juga. semoga kedepannya admin bisa membuat artikel bermanfaat lainnya. terimakasih min, semoga kedepannya admin makin sukses yaa.. Perkenalkan nama saya Ferlyta Athiyyah Rahil, silahkan kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  7. thanks min untuk artikelnya dan ilmunya dari membaca artikel ini saya lebih mengenal bagaimana cara membuat validasi form html dengan javascript.semoga blog ini ke depannya dapat lebih memberikan artikel yg bermanfaat untuk kami yg baru belajar pemrograman web. Always success :)
    perkenalkan nama saya Rachma Dini kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  8. Terima kasih admin atas website nya, website ini sangat bermanfaat bagi saya tentang bagaimana cara membuat validasi form html dengan javascript, apalagi untuk saya yang sedang belajar Pemrograman web. saya harap admin disini selalu update memberikan informasi,Sukses selalu...
    perkenalkan nama saya Nabil Rizky Hibatullah,kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  9. Malam kak... Terimakasih kak artikelnya sangat bermanfaat kak untuk saya lebih mudah mengrtahui lebih dalam tentang cara bagaimana membuat validasi form html menggunakan javascript, dan sangat membantu sekali jika saya ad tugas untuk mengkoding kak.
    Terus berkarya dan suksek selalu kak.
    Nama : Arvina Destiyani
    Nim. : 1922500073
    Kelompok : SI2J
    Link kampus : https://www.atmaluhur.ac.id/

    BalasHapus
  10. trimakasih min atas penjelasan dan ilmu yang disampaikan min sangat menbantu saya ,Nama saya Rizky Pratama dgn NIM 1922500005 kelompok SI2K, Dari stmik atmaluhur, link kampus saya : https://www.atmaluhur.ac.id

    BalasHapus
  11. makasih kak atas informasinya ini sangat membantu saya dalam menggunakan form dengan javascript terus semangat ya kak ditunggu di artikel kak selanjutnya perkenalkan nama saya rida anggraini dgn nim (1922500014) di kel SI2A dan ini link website kampus kami https://www.atmaluhur.ac.id

    BalasHapus
  12. thanks min untuk artikelnya dan ilmunya dari membaca artikel ini saya lebih mengenal bagaimana cara membuat validasi form html dengan javascript. semoga blog ini ke depannya dapat lebih memberikan artikel yg bermanfaat untuk kami yg baru belajar pemrograman web. nama saya Muhammad arga sendianysah, kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  13. Wahh makasih admim gans. Artikelnya padat, jelas, dan mudah dimengerti. Berkat admin saya udah tau gimana caranya buat validasi form html dengan javascript. Semoga admin terus bikin artikel2 yang kayak gini ya! Semoga diberikan kesehatan ditengah2 virus yg mewabah ini. Stay safe!
    Nama saya Putra Raniansyah, dan sekali2 liat website kampus kita ya! https://www.atmaluhur.ac.id/

    BalasHapus
  14. wahhh terimakasihh artikelnya sangat membantu sekali untuk saya memahami cara membuat validasi Mencocokkan Form Password Dengan Javascript
    sangat membantu untuk belajar saya,terus berkarya,ditunggu artikel lainnya perkenalkan nama saya risa aprilia kunjungi juga website kampus saya di link https://www.atmaluhur.ac.id/

    BalasHapus
  15. Terimaksih kang artikel akang yg saya baca dapat menambah pengetahuan saya dan blognya cukup bagus.perkenalkan Nim saya 1922500184 Nama Martin link kampus saya www.atmaluhur.ac.id

    BalasHapus
  16. Wahhh terimakasih banyak min, artikelnya cukup berguna untuk membantu saya yang baru mempelajari tentang materi ini.sekarang saya bisa mengetahui cara membuat validasi form html dengan javascript. apalagi untuk saya yang kuliah di bagian komputer, artikel ini sangat membantu saya dan dapat membantu banyak orang juga. semoga kedepannya admin bisa membuat artikel bermanfaat lainnya. terimakasih min, semoga kedepannya admin makin sukses yaa.perkanalkan nama saya Rinto Zumaris Akbar
    Kunjungi juga website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  17. wah artikelnya menarik sekali gan .. saya jadi tau banyak , artikelnya mudah saya pahami
    terimakasih banyak ya gan sudah membuat artikel ini saya harap agan dapat membuat artikel"yang keren keren lagi .
    perkenalkan nama saya indah lestari
    kunjungi website kampus saya https://www.atmaluhur.ac.id

    BalasHapus
  18. makasih gan atas artikelnya, materi yang disampaikan mudah dipahami dan sederhana sekali. ditunggu gan update-an artikel lainnya. perkenalkan juga, nama saya Ricki Tri Putra mahasiswa dari STMIK atma Luhur jurusan Sistem Informasi. kalau ada waktu luang kunjungin juga ya web kampus saya di : https://www.atmaluhur.ac.id

    BalasHapus

  19. Terima kasih kakak Artikelnya bagus sekali mudah di pahami, sebelumnya saya sangat kesusahan dalam dalam mengkoding tetapi dengan adanya artikel ini dapat mempermudahkan saya cara Membuat Validasi JavaScript Pada Form HTML itu sangat membantu sekali,dan
    terus berkarya ya kak,dan sukses selalu.perkenalkan nama saya dita rahmanda,nim 1922500076,dari kelompok Si2j,dan link kampus saya https://www.atmaluhur.ac.id

    BalasHapus
  20. Terima kasih admin atas website nya, website ini sangat bermanfaat bagi saya tentang bagaimana cara membuat validasi form html dengan javascript, apalagi untuk saya yang sedang belajar Pemrograman web, Terus Berkarya Kak dalam membuat Artikel yang lain Perkenalkan Nama saya Muhammad Rafi-1922500144 Website Kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  21. trimakasih min atas penjelasan dan ilmu yang disampaikan min sangat menbantu saya ,Nama saya Tri Utami dgn NIM 1922500071 kelompok SI2J, Dari stmik atmaluhur, link kampus saya : https://www.atmaluhur.ac.id

    BalasHapus
  22. terimakasih untuk artikelnya dan ilmunya dari membaca artikel ini saya lebih mengenal bagaimana cara membuat validasi form html dengan javascript.semoga materi ini ke depannya dapat lebih memberikan artikel yg bermanfaat .
    Semoga kakak sukses terus yaa🤗
    Perkenalkan NAMA saya DIAN ANGGREINI NIM 1922500136 kunjungi website kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  23. Selamat siang kak,terimakasih telah memberi ilmu,artikelnya sangat menarik dan mudah di praktekan,dan bisa membantu saya menyelesaikan tugas kuliah saya,tetap berkarya terus kak dalam memberikan ilmu.perkenalkan nama saya JEFFRY H SUFRYANTO SIMARMATA,nim 19222500047,dari kelompok SI2j,dan link kampus saya https://www.atmaluhur.ac.id/

    BalasHapus
  24. Terima kasih min, artikel yang mimin berikan sangat berguna sekali untuk saya dan saya disini sangat terbantu oleh artikel nya min, semoga mimin selalu berbagi info seperti ini.
    nama : sadam husein nim 1922500158 kelompok si2k . link kampus : https://www.atmaluhur.ac.id/

    BalasHapus
Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)