praroz/praroz.js at master · A6dulmalik/praroz · 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
const menuBtn = document.querySelector(".menu-icon span");
  const searchBtn = document.querySelector(".search-icon");
  const cancelBtn = document.querySelector(".cancel-icon");
  const items = document.querySelector(".nav-items");
  const searchinput = document.querySelector("inputdiv");
  menuBtn.onclick = () => {
    items.classList.add("active");
    menuBtn.classList.add("hide");
    searchBtn.classList.add("hide");
    cancelBtn.classList.add("show");
  };
  cancelBtn.onclick = () => {
    items.classList.remove("active");
    menuBtn.classList.remove("hide");
    searchBtn.classList.remove("hide");
    cancelBtn.classList.remove("show");
    form.classList.remove("active");
  };
  searchBtn.onclick = () => {
    form.classList.add("active");
    searchBtn.classList.add("hide");
    cancelBtn.classList.add("show");
  };


const form = document.getElementById('form');
const email = document.getElementById('email');
const password = document.getElementById('password');


form.addEventListener("submit", function(e) {
    e.preventDefault();
    checkInput();
});

function checkInput() {
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();

    // Email validation
    if(emailValue === ''){
        setErrorfor(email, 'email cannot be blank');
    } else if (!isEmail(emailValue)){
        setErrorfor(email, 'email must include @ and .com');
    }else{
        setSuccessfor (email);
    }

    // Password validation
    if(passwordValue === ''){
        setErrorfor(password, 'Password cannot be blank');
    }else if(passwordValue.length < 8 ){
        setErrorfor(password, 'Password cannot be less than 8')
    }
    else if(!isValidPassword(passwordValue)){
        setErrorfor(password, 'password must contain letters, numbers and special chraracters')
    }else{
        setSuccessfor(password);
    }
}


function setErrorfor(input, message){
    const form = input.parentElement;
    const small = form.querySelector('small');

    small.innerText=message;
    form.className = "form-control error";
};

function setSuccessfor(input){
    const form = input.parentElement;
    form.className = 'form-control success';
}


// function isEmail(email) {return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);}
// function isValidPassword(password) {return /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/.test(password);}

// form.addEventListener('submit', (e)=>{

//     e.preventDefault();

// })


//     if(passwordValue == ('') || passwordValue == null){
//         setErrorfor(password, passwordError);
//     }
//     else if(passwordValue.length <= 8){
//         setErrorfor(password)
//     }
//     else if(!isValidPassword(passwordValue)){
//         setErrorfor(password, 'passwordError');
//         // passwordError.innerHTML = 'email';
//     }
//     else{
//         setSuccessfor(password);
//     }