https://rondell.ru/js/contacts.js?480746

1ymaps.ready(init);
2
3function init () {
4    var myMap = new ymaps.Map("contactsMap", {
5            center: [55.644892, 37.599768],
6            zoom: 15
7        }),
8        myPlacemark = new ymaps.Placemark([55.644892, 37.599768], {
9            balloonContentHeader: "Röndell",
10            balloonContentBody: "117452, город Москва, Черноморский бульвар дом 17, корпус 1, этаж 4, офис 401, каб. 3",
11            balloonContentFooter: "+7 (499) 711-95-11\n" + "Ежедневно: 9:00 - 21:00 по МСК"
12        }, {preset: 'islands#redDotIcon',});
13
14    myMap.geoObjects.add(myPlacemark);
15
16}
17
18const checkFormFields = () => {
19    let fields= document.querySelectorAll('form input, form textarea');
20
21    const validate_email = (string) => {
22        return /[a-zA-Z0-9]+(?:(\.|_|-)[A-Za-z0-9!#$%&'*+/=?^`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/.test(string)
23    }
24
25    fields.forEach((elem) => {
26        let parentBlock = elem.parentElement;
27        let messageBlock = document.createElement('div');
28        messageBlock.classList.add('message-block');
29        let messageText = '';
30
31        if(elem.value === '') {
32            elem.classList.add('empty');
33            messageText += "Это поле обязательно для заполнения\n";
34            messageBlock.innerText = messageText;
35            parentBlock.append(messageBlock)
36        } else {
37            elem.classList.remove('empty');
38            if(parentBlock.querySelector('.message-block')) {
39                parentBlock.querySelector('.message-block').remove();
40            }
41        }
42
43        if(elem.getAttribute('name') === 'email' && elem.value !== '') {
44            if(!validate_email(elem.value)) {
45                elem.classList.add('error');
46                messageText += "Проверьте правильность заполнения email";
47                messageBlock.innerText = messageText;
48                parentBlock.append(messageBlock)
49            } else {
50                elem.classList.remove('error');
51                if(parentBlock.querySelector('.message-block')) {
52                    parentBlock.querySelector('.message-block').remove();
53                }
54            }
55        }
56
57    })
58}
59const checkEmailForLocalDomain = (input) => {
60    if(input.parentElement.querySelector('.domain-error-message')) {
61        input.parentElement.querySelector('.domain-error-message').remove();
62    }
63
64    if(input.value.toLowerCase().includes('gmail.com') ||  input.value.toLowerCase().includes('hotmail.com')
65        || input.value.toLowerCase().includes('yahoo.com') || input.value.toLowerCase().includes('proton.me')) {
66        input.classList.add('domain-error');
67
68        let messageBlock = document.createElement('div');
69        messageBlock.classList.add('domain-error-message');
70        messageBlock.innerText = "В связи с ограничениями зарубежных сервисов использование адресов gmail.com, hotmail.com, yahoo.com, proton.me невозможно. Пожалуйста, укажите почтовый адрес в локальном домене";
71
72        input.parentElement.append(messageBlock);
73    } else {
74        input.classList.remove('domain-error');
75        if(input.parentElement.querySelector('.domain-error-message')) {
76            input.parentElement.querySelector('.domain-error-message').remove();
77        }
78    }
79}
80
81const checkPolicyInput = () => {
82    let input = document.querySelector('input#Policy');
83
84    if(input.checked) {
85        if(input.parentElement.parentElement.classList.contains('error')) {
86            input.parentElement.parentElement.classList.remove('error');
87        }
88        if(input.parentElement.parentElement.querySelector('.message-block')) {
89            input.parentElement.parentElement.querySelector('.message-block').remove();
90        }
91    } else {
92        input.parentElement.parentElement.classList.add('error');
93        let messageBlock = document.createElement('div');
94        messageBlock.classList.add('message-block');
95        messageBlock.innerText = "Необходимо согласиться с политикой обработки данных";
96
97        input.parentElement.parentElement.append(messageBlock);
98    }
99}
100
101const sendForm = (form) => {
102    let formData = new FormData(form);
103
104    try {
105        fetch('/contacts/sendform', {
106            method: "POST",
107            body: formData,
108        } )
109            .then(() => form.innerHTML = '')
110            .then(() => {
111                let messageBlock = document.createElement('div');
112                messageBlock.classList.add('h2', 'text-center');
113                messageBlock.innerText = 'Сообщение успешно отправлено!';
114                document.querySelector('section').append(messageBlock);
115            })
116    } catch (e) {
117        console.log(e.message)
118    }
119}
120
121document.addEventListener("DOMContentLoaded", () => {
122    let form = document.querySelector('form');
123
124    form.querySelector('input[name="email"]').addEventListener('input', (e)=>checkEmailForLocalDomain(e.target));
125
126    form.addEventListener('submit', (e) => {
127        e.preventDefault();
128        if(document.querySelector('.message-block')) {
129            document.querySelectorAll('.message-block').forEach(el => el.remove());
130        }
131
132        checkFormFields();
133        checkEmailForLocalDomain(form.querySelector('input[name="email"]'));
134        checkPolicyInput();
135
136        if(form.querySelector('.empty') || form.querySelector('.error') || form.querySelector('.domain-error')) {
137            return false;

138        } else {
139            sendForm(form);
140        }
141    })
142
143})