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"/>Sekarang, javascript nya.
<input type="password" id="pw2" placeholder="Konfirmasi Password"/>
<script type="text/javascript">Untuk full code nya seperti ini gambaran nya
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>
<!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.
28 Komentar
Error gan
BalasHapusTerimakasih sudah berkomentar di blog saya.
HapusMohon 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
hasiloutputnya ko beda ya trus ga bisa jalan ga ada keluaran textnya
BalasHapusBisa di jelas kan mungkin seperti apa output / error nya.
HapusUntuk 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 :)
Hatur nuhun kang, moga berkah
BalasHapusSama sama gan, semoga bermanfaat juga buat agan :)
Hapusberhasil 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
BalasHapuswww.atmaluhur.ac.id
BalasHapussaya 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
Work mas. Thanks
BalasHapusterimakasih 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/
BalasHapusthanks 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 :)
BalasHapusperkenalkan nama saya Rachma Dini kunjungi website kampus saya https://www.atmaluhur.ac.id/
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...
BalasHapusperkenalkan nama saya Nabil Rizky Hibatullah,kunjungi website kampus saya https://www.atmaluhur.ac.id/
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.
BalasHapusTerus berkarya dan suksek selalu kak.
Nama : Arvina Destiyani
Nim. : 1922500073
Kelompok : SI2J
Link kampus : https://www.atmaluhur.ac.id/
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
BalasHapusmakasih 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
BalasHapusthanks 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/
BalasHapusWahh 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!
BalasHapusNama saya Putra Raniansyah, dan sekali2 liat website kampus kita ya! https://www.atmaluhur.ac.id/
wahhh terimakasihh artikelnya sangat membantu sekali untuk saya memahami cara membuat validasi Mencocokkan Form Password Dengan Javascript
BalasHapussangat 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/
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
BalasHapusWahhh 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
BalasHapusKunjungi juga website kampus saya https://www.atmaluhur.ac.id/
wah artikelnya menarik sekali gan .. saya jadi tau banyak , artikelnya mudah saya pahami
BalasHapusterimakasih 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
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
BalasHapusTerima 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
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/
BalasHapustrimakasih 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
BalasHapusterimakasih 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 .
BalasHapusSemoga kakak sukses terus yaa🤗
Perkenalkan NAMA saya DIAN ANGGREINI NIM 1922500136 kunjungi website kampus saya https://www.atmaluhur.ac.id/
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/
BalasHapusTerima 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.
BalasHapusnama : sadam husein nim 1922500158 kelompok si2k . link kampus : https://www.atmaluhur.ac.id/