-
Notifications
You must be signed in to change notification settings - Fork 1
/
res.js
115 lines (102 loc) · 2.81 KB
/
res.js
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
110
111
112
113
114
115
//https://www.w3schools.com/jsref/jsref_obj_regexp.asp
//https://www.w3schools.com/jsref/jsref_regexp_digit_non.asp
//https://regex101.com/r/bL0Nfv/2/
const inputs = document.querySelectorAll('input');
const button = document.querySelector('button');
console.log(inputs);
const patterns = {
firstname: {
pattern: /^[A-Z][a-z]{3,12}$/,
valid: false,
},
lastname: {
pattern: /^[A-Z][a-z]{3,12}$/,
valid: false,
},
email: {
pattern: /^([a-z\d\.-]+)@([a-z\d]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/,
valid: false,
},
password: {
pattern: /^[\w@-]{8,20}$/,
valid: false,
},
telephone: {
pattern: /^[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}$/,
valid: false,
},
bio: {
pattern: /^[a-zA-Z \.]{10,100}$/,
valid: false,
},
};
const patterns = {
firstname: {
pattern: /^[A-Z][a-z]{3,12}$/,
valid: false,
},
lastname: {
pattern: /^[A-Z][a-z]{3,12}$/,
valid: false,
},
email: {
pattern: /^([a-z\d\.-]+)@([a-z\d]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/,
valid: false,
},
password: {
pattern: /^[\w@-]{8,20}$/,
valid: false,
},
telephone: {
pattern: /^[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}$/,
valid: false,
},
bio: {
pattern: /^[a-zA-Z \.]{10,100}$/,
valid: false,
},
};
inputs.forEach(element => {
let name;
let pattern;
element.addEventListener('input', e => {
name = e.target.name;
pattern = patterns[name]['pattern'];
formValidator(e.target, pattern);
if (formValidator(e.target, pattern)) {
checker = formValidator(e.target, pattern);
element.className = 'valid';
patterns[name]['valid'] = true;
const validValues = patterns.values();
console.log(validValues)
if (count === 6) {
button.disabled = false;
button.className = 'submit-button';
} else {
button.classList.remove('submit-button');
button.disabled = true;
button.disabled = true;
}
} else {
checker = formValidator(e.target, pattern);
patterns[name]['valid'] = true;
console.log(checker);
element.className = 'invalid';
}
});
});
const formValidator = (element, pattern) => {
let flag;
if (pattern.test(element.value)) {
// element.className = 'valid';
// button.className = 'submit-button';
// button.disabled = false;
flag = true;
} else {
// element.className = 'invalid';
// button.classList.remove('submit-button');
// button.disabled = true;
flag = false;
}
return flag;
};