Membuat Konfirmasi Password

Publish Date : 09-12-2023 , dibaca 61741 kali, Hari ini dibaca : 2 kali ,0 comments

Pada artikel ini kita akan membuat Konfirmasi Password , atau Ulangi , atau Re-type Password dengan menggunakan Javascript dan HTML 5, 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.

Demo

Membuat Konfirmasi Password dengan HTML5 dan Javascript

Dengan Menggunakan HTML5 dan Javascript 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>

Full Code

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

<!DOCTYPE html>
<html>
<head>
<title>Membuat Konfirmasi Password Senterwebs.com</title>
<meta charset="utf-8">
<meta name="Author" content="Senterwebs">
<link rel="icon" href="https://senterwebs.com/favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
</head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 mx-auto ">
        <h1 style="text-align:center;color:green;">
          Senterwebs.Com
      </h1>
          <h3><a href="https://senterwebs.com/artikel-588/membuat-konfirmasi-password.html">Membuat Konfirmasi Password / Retype Password</a></h3>
        <div class='text-center text-success'>

        </div>
<form method="post" action="">
<div class="form-group">
    <label for="">Password</label> 
      <input id="password" class="form-control" 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>
</div>
 <div class="form-group">
    <label for="">Ulangi Password</label>
      <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 class="form-control">
</div>     
                   
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
        </div>

    </div>
</div>
</body>
</html>

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

Demo Download

Membuat Validasi Tanggal dengan Javascript
Previous Post

Mengambil Nilai dari Pop Up dengan Javascript
Next Post