https://www.philenews.com/wp-content/themes/philenews/scripts/contact.js?ver=240227-95300

1/* ======================== 
2    Variables 
3======================== */
4                        
5const form = document.querySelector('.form-wrapper form');
6const itemsForValidation = [...document.querySelectorAll('.field > input, .field > textarea, .check-field input, .field > select')].filter(a => a.type !== 'submit');
7
8/* ======================== 
9    Helper Functions 
10======================== */
11
12// Κάνει scroll όλου του παραθύρου στο σημείου που βρίσκεται το στοιχείο
13// που παίρνει σαν παράμετρο.
14function scrollToElement(inputElem) {
15    window.scrollTo({
16        top: Math.abs(inputElem.getBoundingClientRect().top),
17        left: inputElem.getBoundingClientRect().left,
18        behavior: 'smooth'
19    });
20}
21
22// Παράγει μία "ειδοποίηση" στο σημείο που εφανίζεται το label από το αντίστοιχο 
23// πεδίο στη φόρμα.
24function notifyError(inputElem, notificationText) {
25    inputElem.nextElementSibling.innerHTML = `${notificationText}`;
26    inputElem.nextElementSibling.style.color = 'rgba(230, 10, 10, 1)';
27}
28
29// Ελέγχει αν ένα πεδίο έχει συμπληρωθεί
30function checkIfFilled(inputElem) {
31    return inputElem.value !== '';
32}
33
34/* ======================== 
35    Validation Functions 
36======================== */
37
38// Ομοίως με παραπάνω απλά με τα notifications και λοιπά φρουφρου...
39function nameFilled(inputElem) {
40    if (inputElem.value !== '') {
41        allesKlar = true;
42    } else {
43        notifyError(inputElem, '*Το πεδίο αυτό είναι υποχρεωτικό');
44        scrollToElement(inputElem);
45        allesKlar = false;
46    }
47    readyToSubmit.nameFilled = allesKlar;
48}
49
50// Regex του Γιώργου για να ελέγχουμε αν το email που έβαλε ο χρήστης στη φόρμα
51// είναι σωστή. Παράγει ειδοποίηση και επιστρέφει επίσης true/false για την τελική 
52// υποβολή.
53function validEmail(inputElem) {
54    let allesKlar = true;
55    if (inputElem.value !== '') {
56        if(!/(?!(^[.-].*|[^@]*[.-]@|.*\.{2,}.*)|^.{254}.)([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@)(?!-.*|.*-\.)([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,15}/.test(inputElem.value)) {
57            notifyError(inputElem, 'Εισάγετε μία έγκυρη διεύθυνση email.');
58            scrollToElement(inputElem);
59            allesKlar = false;
60        } else {
61            allesKlar = true;
62        }
63    } else {
64        notifyError(inputElem, '*Το πεδίο αυτό είναι υποχρεωτικό');
65        scrollToElement(inputElem);
66        allesKlar = false;
67    }              
68    readyToSubmit.emailValid = allesKlar;
69}
70
71// Ελέγχει αν ο αριθμός τηλεφώνου είναι σωστός, δηλαδή, αν είναι πράγματι αριθμός και όχι προϊόν δυσλεξίας,
72// αν ξεκινάει από 6 ή 2 (κινητό/σταθερό) και αν είναι δεκαψήφιος (10). Παράγει ειδοποίηση και επιστρέφει 
73// επίσης true/false για την τελική υποβολή.
74function validPhoneNumber(inputElem) {
75    let allesKlar = true;
76    let validStartingNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
77    if (inputElem.value !== '') {
78        if (!validStartingNumbers.includes(inputElem.value[0]) 
79            || !/^[0-9]+$/.test(inputElem.value) 
80            || inputElem.value.length < 7
81            || isNaN(inputElem.value) && isNaN(parseInt(inputElem.value))) {
82            notifyError(inputElem, 'Εισάγετε έγκυρο αριθμό τηλεφώνου');
83            scrollToElement(inputElem);
84            allesKlar = false;
85        } else {
86            allesKlar = true;
87        }
88    } else {
89        notifyError(inputElem, '*Το πεδίο αυτό είναι υποχρεωτικό');
90        scrollToElement(inputElem);
91        allesKlar = false;

92    }               
93    readyToSubmit.phoneValid = allesKlar;
94}
95
96                    
97                    
98// Εμφανίζει μήνυμα σε περίπτωση που το κείμενο στην textarea στη φόρμα έχει
99// παραπάνω από 1000 χαρακτήρες. Επίσης επιστρέφει true/false για τον τελικό έλεγχο
100// πριν την υποβολή της φόρας. 
101function textArealimit(inputElem) {
102    let allesKlar = true;
103    if (inputElem.value !== '') {
104        if (inputElem.value.length > 1000) {
105            notifyError(inputElem, 'Ο μέγιστος αριθμός χαρακτήρων είναι 1000.');
106            scrollToElement(inputElem);
107            allesKlar = false;
108        } else {
109            allesKlar = true;
110        }
111    } else {
112        notifyError(inputElem, '*Το πεδίο αυτό είναι υποχρεωτικό');
113        scrollToElement(inputElem);
114        allesKlar = false;
115    }
116    readyToSubmit.textAreaValid = allesKlar;
117}
118
119function isFormChecked(elm) {
120    let allesKlar = true;
121    if(!elm.checked) {
122        elm.parentElement.firstChild.textContent = `Παρακαλώ επιλέξτε το πεδίο.`;
123        elm.parentElement.style.color = 'rgba(230, 10, 10, 1)';
124        allesKlar = false;
125    } else {
126        elm.parentElement.firstChild.textContent = `Αποδέχομαι την πολιτική απορρήτου της εταιρείας.`;
127        elm.parentElement.style.color = 'rgba(255,255,255,1)';
128    }
129    readyToSubmit.checkBox = allesKlar;
130}; 
131
132function isDepartmentChecked(inputElem) {
133    if (inputElem.value !== '') {
134        allesKlar = true;
135    } else {
136        notifyError(inputElem, '*Παρακαλώ επιλέξτε τμήμα.');
137        scrollToElement(inputElem);
138        allesKlar = false;
139    }
140    readyToSubmit.departmentSelected = allesKlar;
141}
142
143const readyToSubmit = {
144    nameFilled: '',
145    emailValid: '',
146    phoneValid: '',
147    textAreaValid: '',
148    checkBox: '',
149    departmentSelected: ''
150}
151
152function cleanForm() {
153    itemsForValidation.forEach(a => {
154        a.value = '';
155        a.checked = false;
156    });
157}
158
159function form_submit(form) {
160    nameFilled(itemsForValidation[0]);
161    validEmail(itemsForValidation[1]);
162    validPhoneNumber(itemsForValidation[2]);
163    textArealimit(itemsForValidation[4]);
164    isDepartmentChecked(itemsForValidation[5])
165    isFormChecked(itemsForValidation[6])
166
167    const lastStep = Object.values(readyToSubmit);
168    console.log(lastStep)
169    if (!lastStep.some(elem => elem == false)) {
170                    
171        // dataLayer.push({
172        //  event:'form_submit',
173        //  eventCategory:'Form Submission',
174        //  eventAction:'Submit',
175        //  eventLabel: 'Form'
176        // });
177
178        // setTimeout(() => form.submit(), 500)
179        // // setTimeout(() => cleanForm(), 800)
180        form.submit()
181    }
182}
183
184            
185itemsForValidation.forEach(elem => {
186    elem.addEventListener('focus', function() {
187        console.log(elem)
188        // elem.nextElementSibling.style.visibility = 'hidden';
189        if (elem.name === 'message_name') {
190            elem.nextElementSibling.innerHTML = 'Εισάγετε το όνομά σας';
191            elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';    
192        } else if (elem.name === 'message_phone') {
193            elem.nextElementSibling.innerHTML = '*Hint: Εισάγετε νούμερο χωρίς κωδικό χώρας';
194            elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
195        } else if (elem.name === 'message_email') {
196            elem.nextElementSibling.innerHTML = 'Εισάγετε το email σας.';
197            elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
198        } else if (elem.name === 'message_text_subject') {
199            elem.nextElementSibling.innerHTML = 'Εισάγετε θέμα του μηνύματος';
200            elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
201        } else if (elem.type === 'checkbox') {
202            // elem.parentElement.firstChild.textContent = 'Πατήστε για αποδοχή όρων';
203            // elem.parentElement.style.color = 'rgba(0,0,0,0.3)';
204        } else if (elem.type === 'select-one') {
205            elem.nextElementSibling.innerHTML = 'Επιλέξτε τμήμα.';
206            elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
207        } else {
208            elem.nextElementSibling.innerHTML = 'Συμπληρώστε το μήνυμά σας.';
209            elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
210        }
211    });
212                    
213    elem.addEventListener('blur', function() {
214        if (elem.value === '') {
215            if (elem.name === 'message_name') {
216                elem.nextElementSibling.innerHTML = 'Συμπληρώστε το πεδίο';
217                elem.nextElementSibling.style.color = 'rgba(230, 10, 10, 1)';   
218            } else if (elem.name === 'message_phone') {
219                elem.nextElementSibling.innerHTML = 'Συμπληρώστε το πεδίο';
220                elem.nextElementSibling.style.color = 'rgba(230, 10, 10, 1)';
221            } else if (elem.name === 'message_email') {
222                elem.nextElementSibling.innerHTML = 'Συμπληρώστε το πεδίο';
223                elem.nextElementSibling.style.color = 'rgba(230, 10, 10, 1)';
224            } else if (elem.name === 'message_text_subject') {
225                elem.nextElementSibling.innerHTML = 'Συμπληρώστε το πεδίο';
226                elem.nextElementSibling.style.color = 'rgba(230, 10, 10, 1)';
227            } else if (elem.type === 'checkbox') {
228                // elem.parentElement.firstChild.textContent = 'Πατήστε για αποδοχή όρων';
229                // elem.parentElement.style.color = 'rgba(0,0,0,0.3)';
230            } else if (elem.type === 'select-one') {
231                elem.nextElementSibling.innerHTML = 'Επιλέξτε τμήμα.';
232                elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
233            } else {
234                elem.nextElementSibling.innerHTML = 'Συμπληρώστε το πεδίο';
235                elem.nextElementSibling.style.color = 'rgba(230, 10, 10, 1)';
236            }
237        } else {
238            if (elem.name === 'message_name') {
239                elem.nextElementSibling.innerHTML = 'Όνομα';
240                elem.nextElementSibling.style.color = 'rgba(0,0,0,1)';  
241            } else if (elem.name === 'message_phone') {
242                elem.nextElementSibling.innerHTML = 'Τηλέφωνο';
243                elem.nextElementSibling.style.color = 'rgba(0,0,0,1)';
244            } else if (elem.name === 'message_email') {
245                elem.nextElementSibling.innerHTML = 'Email';
246                elem.nextElementSibling.style.color = 'rgba(0,0,0,1)';
247            } else if (elem.name === 'message_text_subject') {
248                elem.nextElementSibling.innerHTML = 'Θέμα';
249                elem.nextElementSibling.style.color = 'rgba(0,0,0,1)';
250            } else if (elem.type === 'checkbox') {
251                // elem.parentElement.firstChild.textContent = 'Πατήστε για αποδοχή όρων';
252                // elem.parentElement.style.color = 'rgba(0,0,0,0.3)';
253            } else if (elem.type === 'select-one') {
254                elem.nextElementSibling.innerHTML = 'Τμήμα';
255                elem.nextElementSibling.style.color = 'rgba(0,0,0,0.3)';
256            } else {
257                elem.nextElementSibling.innerHTML = 'Μήνυμα';
258                elem.nextElementSibling.style.color = 'rgba(0,0,0,1)';
259            }
260        }
261        
262    });
263});
264
265function showTheAlert(response) {
266    const alertBox = document.createElement('div');
267    alertBox.classList.add('alert__container');
268    alertBox.insertAdjacentHTML('afterbegin', `
269        <div class="alert__message">
270            <img src="${generalTerms.themeDirectory}/assets/images/icons/${response.type == 'success' ? 'check' : 'close'}.png" class="verification__icon" alt="">

271            <span class="alert--txt">
272                ${response.message}
273            </span>
274        </div>`
275    );
276    document.body.appendChild(alertBox);
277          
278    setTimeout(() => {
279        alertBox.classList.add('alert__container--show')
280    }, 100)
281
282    setTimeout(() => {
283        alertBox.classList.remove('alert__container--show')
284    }, 3600)
285
286    setTimeout(() => {
287        alertBox.remove();
288    }, 3800)    
289}
290
291window.addEventListener('DOMContentLoaded', cleanForm);