react-js/1 Password Validatio Part 1.html at main · swayamtrivedi/react-js · GitHub

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
35
36
<!DOCTYPE html>
<html lang="es-US">
<head>
<title>Ch-22 Password Validatio Part 1 & 2 </title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<form>
Password <br>
<input type="password" name="password" id="password" onclick="phint()" oninput="pcheck()" /> <span id="hint"></span> <i class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:18px;opacity:0;" id="loader"></i> <i class="fa fa-check" style="opacity:0;" id="tick"></i>
</form>
<script>
function phint()
{
var x = document.getElementById("hint");
x.innerHTML = "Enter Minimum 10 digit password !"
}

function pcheck()
{
var hint = document.getElementById("hint");
hint.style.display = "none";

var loader = document.getElementById("loader");
loader.style.opacity = "1";

var uinput = document.getElementById("password").value;
uinput.length>10 ? loader.style.opacity= "0" : loader.style.opacity= "1";

var check = document.getElementById("tick");
uinput.length>10 ? tick.style.opacity = "1" : tick.style.opacity= "0";
}
</script>
</body>
</html>