Show Hide Password di form dengan Jquery
Thursday 26 October 2017
Edit
Show hide password di form dengan jquery berfungsi untuk mengetahui inputan password yang sudah dilakukan juga berfungsi untuk mengecek kesesuaian password yang diinputkan, nah pada kesempatan kali ini saya akan memberikan sedikit tutorial tersebut,
Yang harus disiapkan adalah form untuk membuat show hide password yang berupa field textbox dan checkbox serta CDN JQuery atau file JQuery,js pada tutorial ini saya menggunakan CDN JQuery, code lengkapnya adalah seperti di bawah ini
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Hakko Bio Richard" />
<title>Show Hide Password dengan Jquery</title>
</head>
<body>
<h1> Show Hide Password</h1>
<form>
<input type="password" name="form-password" id="form-password" class="form-password" required="required" /><br />
<input type="checkbox" class="form-checkbox" /> Lihat Password
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.form-checkbox').click(function(){
if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}
});
});
</script>
</body>
</html>
dari code diatas akan di hasilkan tampilan seperti di bawah ini
Ketika checkbox di klik maka akan muncul tampilan seperti di bawah ini
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
code di atas adalah pemanggilan CDN (Code Delivery Network) JQuery.
<form> <input type="password" name="form-password" id="form-password" class="form-password" required="required" /><br /> <input type="checkbox" class="form-checkbox" /> Lihat Password </form>
code di atas adalah form yang didalamnya terdapat field text juga checkbox yang berisikan class untuk menjalankan perintah show hide password di JQuery.
<script type="text/javascript">
$(document).ready(function(){
$('.form-checkbox').click(function(){
if($(this).is(':checked')){
$('.form-password').attr('type','text');
}else{
$('.form-password').attr('type','password');
}
});
});
</script>
code diatas merupakan class yang berfungsi untuk membuat show dan hide password.
Semoga tutorial singkat ini bisa bermanfaat dan berguna bagi anda yang membutuhkannya, silahkan di coba dan dipraktekan, selamat mencoba.
Happy Coding & Programming