Cara Membuat Validasi Password Cocok dengan Javasript

13 November 2022 Jasa Website Tutorial

Ketika berhadapan dengan form, acapkali diperlukan validasi agar input ke dalam database sesuai dengan batasan yang ditentukan. Misalnya ketika membuat password, perlu inputan untuk verifikasi password agar password yang dikehendaki tidak salah.

Sering kita temukan ketika membuat akun, diperlukan pengisian password dan ulangi password. Nah, disini perlu dibuat validasi agar password pertama dan ulang password mesti sama. Bila berbeda, pengiriman data dihentikan, sampai dilakukan perbaikan.

Bagaimana cara membuat validasi password? Langsung saja simak codingnya di bawah ini.

Pertama File html form password:

<div class="col-span-12 xs:col-span-6">
                            <label class="flex flex-col">
                                <span class="text-sm">Masukkan Password Baru</span>
                                <input class="input" type="password" name="password" id="pass"  required />
                            </label>
                            </div> 
                            <div class="col-span-12 xs:col-span-6">
                            <label class="flex flex-col">
                                <span class="text-sm">Ulangi Password Baru</span>
                                <input  class="input" type="password"  id="cpass" onchange="check()" required />
                            </label>
                            <div class="text-sm text-red-500" id="message">  </div>
                            </div>
                            <div class="pt-7"></div>
                        
                        <div class="flex justify-between">
                                <button class="btn-next-step btn-effect bg-primary-color text-white uppercase font-bold rounded-lg p-2 px-3" id="submitx" type="submit" disabled>
                                    <span class="text-center">Save</span>
                                </button>
                            </div>

Kedua tambahkan javascript sebelum tag < / body >

<script>
    function check() {
    if(document.getElementById('pass').value === document.getElementById('cpass').value) {
        document.getElementById('message').innerHTML = "";
        document.getElementById("submitx").disabled = false;
    } else {
        document.getElementById('message').innerHTML = "Password  dan ulang password tidak cocok";
        document.getElementById("submitx").disabled = true;
    }
}
</script>

Sediki penjelasan script di atas

Pada file html terdapat id message adalah untuk menampung pesan ketika form diisi, apakah kedua password cocok atau tidak.

Pada tombol ditambahkan "disable" untuk menghindara submit sebelum kedua isian password cocok. Disable akan dibuat false pada javasript ketika form diisi cocok.

Demikian, semoga bisa dipahami dan bisa langsung dicoba.