blob: f151f9ae408ab93c1548ae7524987fca0bb4bac1 (
plain)
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
37
38
39
40
41
42
43
44
45
46
47
48
|
const username = document.getElementById("username");
const username_icon_cancel = document.getElementById("icon-cancel__username");
const username_icon_check = document.getElementById("icon-check__username");
const username_input_error = document.getElementById("input-error__username");
const password = document.getElementById("password");
const password_icon_cancel = document.getElementById("icon-cancel__password");
const password_icon_check = document.getElementById("icon-check__password");
const password_input_error = document.getElementById("input-error__password");
username.addEventListener('input', validate_username_length);
password.addEventListener('input', validate_password_length);
function validate_username_length(e) {
var username_length = e.target.value.length;
if(username_length < 4){
username_icon_check.style.display = "none";
username_icon_cancel.style.display = "block";
username_input_error.style.display = "block";
}
if(username_length >=4 && username_length <= 16){
username_icon_check.style.display = "block";
username_icon_cancel.style.display = "none";
username_input_error.style.display = "none";
}
if(username_length > 16){
username_icon_check.style.display = "none";
username_icon_cancel.style.display = "block";
username_input_error.style.display = "block";
}
}
function validate_password_length(e) {
var password_length = e.target.value.length;
if(password_length < 4){
password_icon_check.style.display = "none";
password_icon_cancel.style.display = "block";
password_input_error.style.display = "block";
}
if(password_length >=4 && password_length <= 12){
password_icon_check.style.display = "block";
password_icon_cancel.style.display = "none";
password_input_error.style.display = "none";
}
if(password_length > 12){
password_icon_check.style.display = "none";
password_icon_cancel.style.display = "block";
password_input_error.style.display = "block";
}
}
|
