"aja"
Bootstrap 4.0.0 Snippet by edzapratama

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
.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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 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';
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard

Questions / Comments: