/
script.js
94 lines (89 loc) · 4.48 KB
/
script.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
const form = document.forms.register;
const nameInput = form.elements.name;
const emailInput = form.elements.email;
const telInput = form.elements.tel;
const urlInput = form.elements.url;
const regexName = /^([А-Я][а-яё]+)(-?[А-Я][а-яё]+)?$/;
const regexEmail = /^([\dA-Za-z\.-]{2,})+@([A-Za-z\.-]{2,})+\.([A-Za-z]{2,6})$/;
const regexTel = /^(\+)?(\d)\s?(\()?(\d{3})(\))?\s?-?(\d{3})\s?-?(\d{2})\s?-?(\d{2})$/;
const regexUrl = /^(http(s)?:\/\/)(w{3}\.)?((\d+\.\d+\.\d+\.\d+)|(([A-Za-z\.-]{2,})\.([A-Za-z]{2,6})))(:\d{2,5})?\/?([\dA-Za-z\/]+#?)?$/;
document.querySelector('.form__button').
setAttribute('disabled', `disabled`);
document.querySelector('.form__button').
setAttribute('style', `background-color: #aba9a9;`);
form.addEventListener('input', event => {
if (event.target.closest('.form__input')) {
let valueName = event.target.getAttribute('name');
switch (valueName) {
case 'name':
event.target.setAttribute('pattern', `${regexName}`);
if (nameInput.value.match(regexName) !== null) {
event.target.classList.add('form__inp');
event.target.nextElementSibling.classList.remove('form__in');
event.target.classList.remove('form__in');
} else {
event.target.classList.add('form__in');
event.target.nextElementSibling.classList.add('form__in');
event.target.nextElementSibling.classList.remove('form__inp');
event.preventDefault();
}
break;
case 'email':
event.target.setAttribute('pattern', `${regexEmail}`);
if (emailInput.value.match(regexEmail) !== null) {
event.target.classList.add('form__inp');
event.target.nextElementSibling.classList.remove('form__in');
event.target.classList.remove('form__in');
} else {
event.target.classList.add('form__in');
event.target.nextElementSibling.classList.add('form__in');
event.target.nextElementSibling.classList.remove('form__inp');
event.preventDefault();
}
break;
case 'tel':
event.target.setAttribute('pattern', `${regexTel}`);
if (telInput.value.match(regexTel) !== null) {
event.target.classList.add('form__inp');
event.target.nextElementSibling.classList.remove('form__in');
event.target.classList.remove('form__in');
} else {
event.target.classList.add('form__in');
event.target.nextElementSibling.classList.add('form__in');
event.target.nextElementSibling.classList.remove('form__inp');
event.preventDefault();
}
break;
case 'url':
event.target.setAttribute('pattern', `${regexUrl}`);
if (urlInput.value.match(regexUrl) !== null) {
event.target.classList.add('form__inp');
event.target.nextElementSibling.classList.remove('form__in');
event.target.classList.remove('form__in');
} else {
event.target.classList.add('form__in');
event.target.nextElementSibling.classList.add('form__in');
event.target.nextElementSibling.classList.remove('form__inp');
event.preventDefault();
}
break;
}
}
if ((nameInput.value.match(regexName) && emailInput.value.match(regexEmail) &&
telInput.value.match(regexTel) && urlInput.value.match(regexUrl)) !== null) {
document.querySelector('.form__button').
removeAttribute('disabled');
document.querySelector('.form__button').
removeAttribute('style');
} else {
document.querySelector('.form__button').
setAttribute('disabled', `disabled`);
document.querySelector('.form__button').
setAttribute('style', `background-color: #aba9a9;`);
}
});
document.querySelector('.form__button').
addEventListener('click', event => {
event.preventDefault();
form.reset();
});