"aja"
Bootstrap 4.0.0 Snippet by edzapratama

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> </head> <body> <div class="container"> <h1>Cara Membuat Validasi Password Menggunakan JavaScript</h1> <form action="proses.html" method="" id="frm-mhs"> <label for="pass1" class="pesan">PASSWORD: </label> <input type="password" name="pass1" id="pass1" size="15" class="input" required="" /> <label for="pass2" class="pesan">ULANGI PASSWORD: <i id="icon" class="fa fa-eye-slash"></i></label> <input type="password" name="pass2" id="pswd2" size="15" class="input" required=""/> <br> <input type="submit" name="Submit" value="OK"/> </form> </div> <script src="pass.js"></script> </body> </html>
.container {width: 500px; margin: auto; background: #afc1b3; padding: 15px;} .pesan {display:block; font-size:small; margin-top:5px;} .error {color:red; } h1 {font-size: 23px; font-weight: bold; text-align: center;} .fa {cursor: pointer; } .input {width: 350px; height: 35px; margin: 10px 0 0 0;} .active, input[type='text'] {width: 350px;height: 35px;margin: 10px 0 0 0;}
// Proses Validasi Password $(document).ready(function() { $('#frm-mhs').validate({ rules: { pass2: { equalTo: "#pass1" } }, messages: { pass2: { equalTo: "<p>Password yang Anda Masukan Tidak Sama</p>" } } }); }); // Proses Show Password var input = document.getElementById('pswd2'), icon = document.getElementById('icon'); icon.onclick = function () { if(input.className == 'active') { input.setAttribute('type', 'text'); icon.className = 'fa fa-eye'; input.className = ''; } else { input.setAttribute('type', 'password'); icon.className = 'fa fa-eye-slash'; input.className = 'active'; } }

Related: See More

Vue Material Dashboard

Questions / Comments: