Task-Management-Project/script.js at main · yanqi-huang/Task-Management-Project · 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// document.getElementById("login_username").addEventListener("click", function () {
//     this.style.border = "2px solid rgba(255, 255, 255, .2);"; // Reset border
//     document.getElementById("usernameError").innerHTML = ""; // Remove error message
// });

// // function showAlert() {
// //     let login = document.getElementById("login_username");
// //     login.style.border = "2px solid rgba(255, 255, 255, .2)";

// // }
// function validate() {

//     let login = document.getElementById("login_username");
//     let nameError = document.getElementById("usernameError");
//     nameError.innerHTML = "";//resert

//     let isValid = true;

//     if (login.value === "" || login.value.length < 4) {
//         nameError.innerHTML = "<p> * User name should be non-empty and 4 characters long</p>";
//         login.style.border = "2px solid red";
//         isValid = false;
//     }
//     return isValid;
// }


// document.getElementById("login_username").addEventListener("input", showAlert());
// function showAlert() {
//     let login = document.getElementById("login_username");
//     login.style.border = "2px solid rgba(255, 255, 255, .2)";

// }
function validate() {
    let login = document.getElementById("login_username");
    let nameError = document.getElementById("usernameError");
    nameError.innerHTML = ""; // Reset

    let passInput = document.getElementById("login_password");
    let passError = document.getElementById("passError");
    let passPattern = /^(?=.*[a-z])(?=.*[A-Z]).{4,}$/;
    passError.innerHTML = "";//resert
    let reTypePass = document.getElementById("confirm_password");
    let reTypeError = document.getElementById("reTypeError");
    reTypeError.innerHTML = "";//resert
    let isValid = true;
    login.style.border = "2px solid rgba(255, 255, 255, .2)";
    passInput.style.border = "2px solid rgba(255, 255, 255, .2)";
    reTypePass.style.border = "2px solid rgba(255, 255, 255, .2)";

    if (login.value === "" || login.value.length < 4) {
        nameError.innerHTML = "<p> Error: Username should be at least 4 characters</p>";
        login.style.border = "2px solid red";
        isValid = false;
    }
    // Password Validation
    if (!passPattern.test(passInput.value)) {
        passError.innerHTML = "<p> Error: Password should be at least 4 characters with 1 uppercase and 1 lowercase</p>";
        passInput.style.border = "2px solid red";
        isValid = false;
    }

    // Retype Password Validation
    if (reTypePass.value === "" || reTypePass.value !== passInput.value || !passPattern.test(reTypePass.value)) {
        reTypeError.innerHTML = "<p> Error: Please retype password</p>";
        reTypePass.style.border = "2px solid red";
        isValid = false;
    }
    return isValid;
}