form-validation/index.js at master · julio22b/form-validation · 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
function confirmEmail() {
    const email = document.getElementById('email');
    const emailConfirm = document.getElementById('email-confirm');
    const p = document.getElementsByTagName('p')[1];

    if (email.value.toLowerCase() !== emailConfirm.value.toLowerCase()) {
        p.textContent = `emails don't match`;
        email.style.boxShadow = '0px 0px 3px red';
        emailConfirm.style.boxShadow = '0px 0px 3px red';
    } else {
        email.style.boxShadow = '0px 0px 3px green';
        emailConfirm.style.boxShadow = '0px 0px 3px green';
        p.textContent = 'email confirmed';
    }
}

function confirmZipCode() {
    const zipInput = document.getElementById('zip-code');
    const p = document.getElementsByTagName('p')[2];

    if (!zipInput.checkValidity()) {
        p.textContent = 'zip code is invalid';
        zipInput.style.boxShadow = '0 0 3px red';
    } else if (!zipInput.value) {
        zipInput.style.boxShadow = 'none';
        p.textContent = '';
    } else {
        p.textContent = '';
        zipInput.style.boxShadow = '0 0 3px green';
    }
}

function passwordCheck() {
    const password = document.getElementById('password');
    const p = document.getElementsByTagName('p')[3];
    confirmPassword();

    if (!password.checkValidity()) {
        p.textContent = 'Password is too short';
        password.style.boxShadow = '0 0 3px red';
        return false;
    } else {
        p.textContent = '';
        password.style.boxShadow = '0 0 3px green';
        return true;
    }
}

function confirmPassword() {
    const password = document.getElementById('password');
    const passwordConfirm = document.getElementById('password-confirm');
    const p = document.getElementsByTagName('p')[4];

    if (password.value === passwordConfirm.value) {
        p.textContent = 'password confirmed';
        password.style.boxShadow = '0 0 3px green';
        passwordConfirm.style.boxShadow = '0 0 3px green';
    } else {
        p.textContent = `passwords don't match`;
        password.style.boxShadow = '0 0 3px red';
        passwordConfirm.style.boxShadow = '0 0 3px red';
    }
}