contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Konfirmasi Password

Posted in Javascript Jquery Life at 24 Desember 2017 With 0 Comments

Pada artikel ini kita akan membuat Konfirmasi Password , atau Ulangi , atau Re-type Password dengan menggunakan Javascript Jquery, Tutorial sebelumnya kita juga sudah membuat Membuat Retype atau Ulangi Password di PHP , Nah pada kesempatan ini kita akan membahas kembali dengan lebih kompleks lagi.

Dalam kasus ini kita sering melihat aplikasi seperti facebook , dimana kita diminta untuk memasukkan password 2 x , password yang kedua harus sama dengan password yang pertama.. hal ini di lakukan untuk memvalidasi password, memberikan kepastian data, dan mencegah spam atau hacker bekerja secara mudah.

membuat konfirmasi password

Membuat Konfirmasi Password Dengan Jquery

▼ Download Source Nya Di Bawah Ini ▼


OK.. Langsung saja.. silahkan copy paste script dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Retype Password Suckittrees.Com</title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<b>Confirm Password Suckittrees.com</b>
    <table border="0" cellpadding="3" cellspacing="0">
        <tr>
            <td>
                Password:
            </td>
            <td>
                <input type="password" id="txtPassword" />
            </td>
        </tr>
        <tr>
            <td>
                Confirm Password:
            </td>
            <td>
                <input type="password" id="txtConfirmPassword" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" id="btnSubmit" value="Submit" />
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                var password = $("#txtPassword").val();
                var confirmPassword = $("#txtConfirmPassword").val();
                if (password != confirmPassword) {
                    alert("Passwords do not match.");
                    return false;
                }
                return true;
            });
        });
    </script>
</body>
</html>

Simpan dengan nama index.html , dan jalankan di browser anda... (catatan harus terkoneksi internet, karena kita menggunakan Jquery). Silahkan Klink Link demo di bawah ini

Demo Download

Dalam membuat Konfirmasi Password disini kita menggunakan Jquery , dima kita memanggil Jquery dengan script :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Script diatas harus terkoneksi di internet, Jika anda tidak ingin terkoneksi internet , namun dapat menjalankan script di atas, silahkan download Copy jquery nya pada link :

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

Simpan dengan nama : jquery.min.js

Ok.. Setelah itu,, kita membuat fungsi sebagai berikut :

    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                var password = $("#txtPassword").val();
                var confirmPassword = $("#txtConfirmPassword").val();
                if (password != confirmPassword) {
                    alert("Passwords do not match.");
                    return false;
                }
                return true;
            });
        });
    </script>

Script diatas , adalah script controller Form , dimana kita membuat function , jika btnSubmit di klik Jalankan Perntah.. nya..  Dimana kita membuat variabel :

var password = $("#txtPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();

#txtPassword , merupakan ID pada inputan Password, begitu juga #txtConfirmPassword merupakan id pada inputan Confirm password, dan kemudian kita berikan logika IF :

                if (password != confirmPassword) {
                    alert("Passwords do not match.");
                    return false;
                }

Jika password tidak sama dengan confirmPassword , Tampilkan Pesan kepada pengguna,, Gimana Mudah bukan Membuat Konfirmasi Password dengan Jquery.. ??

Membuat Konfirmasi Password dengan HTML5

Dengan Menggunakan HTML5 kita bisa dengan mudah membuat Konfirmasi Password, berikut contoh script yang bisa kita gunakan :

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Minimal 6 Karakter' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Masukkan Password Yang Sama' : '');" placeholder="Verify Password" required>

Artikel Rekomendasi



Artikel Terkait

Diskusi