https://www.standar.pl/scripts/form-validation.js

1/**
2 * Skrypt walidacji formularzy "live"
3 * ---------------------------
4 * Obsługiwane typy:
5 *   - 'set'            : wymagane pole tekstowe
6 *   - 'email'          : pole tekstowe z walidacją adresu e-mail
7 *   - 'checked'        : checkbox, który musi być zaznaczony (walidacja live przy zmianie)
8 *   - 'checkedImportant': checkbox, który musi być zaznaczony; walidacja jest wymuszana przy submit
9 *
10 * Dodatkowo:
11 *   - Tworzy prostokącik (div.error-box) pod każdym inputem/checkboxem na komunikaty błędów
12 *   - Walidacja uruchamia się przy wpisywaniu danych (input), zmianie (checkbox) oraz utracie fokusa (blur)
13 *   - Przy próbie submit sprawdza wszystkie pola i blokuje wysyłkę formularza, jeśli są błędy
14 *
15 * Stylizacja:
16 *   - Klasa `.input-error` dla pola z błędem
17 *   - Komunikaty wyświetlane w kontenerze `.error-box`
18 *
19 * Wymagania HTML:
20 *   - inputy muszą mieć atrybut `val="set|email|checked|checkedImportant"`
21 */
22
23document.addEventListener('DOMContentLoaded', () => {
24    const forms = document.querySelectorAll('form.validate-live');
25    if (!forms.length) return;
26
27    forms.forEach(form => {
28        const inputs = form.querySelectorAll('[val]');
29        inputs.forEach(input => {
30            // stwórz div pod komunikaty błędów
31            const errorBox = document.createElement('div');
32            errorBox.className = 'error-box';
33            input.insertAdjacentElement('afterend', errorBox);
34
35            // funkcja walidacyjna dla danego inputa
36            const validateField = (forceCheck = false) => {
37                const valType = input.getAttribute('val');
38                const value = input.value.trim();
39                let valid = true;
40                let message = '';
41
42                if (valType === 'set' && !value) {
43                    valid = false;
44                    message = 'Pole jest wymagane';
45                } else if (valType === 'email') {
46                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
47                    if (!emailRegex.test(value)) {
48                        valid = false;
49                        message = 'Niepoprawny adres e-mail';
50                    }
51                } else if (valType === 'checked' && !input.checked && forceCheck) {
52                    valid = false;
53                    message = 'Wymagane';
54                } else if (valType === 'checkedImportant' && !input.checked) {
55                    valid = false;
56                    message = 'Wymagane';
57                }
58
59                if (!valid) {
60                    input.classList.add('input-error');
61                    errorBox.textContent = message;
62                    errorBox.style.display = 'block';
63                } else {
64                    input.classList.remove('input-error');
65                    errorBox.style.display = 'none';
66                }
67
68                return valid;
69            };
70
71            // przypisz funkcję walidacyjną do inputa, aby była dostępna przy submit
72            input._validateField = validateField;
73
74            // walidacja "live"
75            if (input.type === 'checkbox') {
76                input.addEventListener('change', () => validateField());
77            } else {
78                input.addEventListener('input', () => validateField());
79                input.addEventListener('blur', () => validateField());
80            }
81        });
82
83        // obsługa submit
84        form.addEventListener('submit', e => {
85            let allValid = true;
86
87            inputs.forEach(input => {
88                const valType = input.getAttribute('val');
89                const forceCheck = (valType === 'checkedImportant');
90
91                // używamy przypisanej funkcji walidacyjnej
92                if (!input._validateField(forceCheck)) allValid = false;
93            });
94
95            if (!allValid) e.preventDefault();
96        });
97    });
98});
99 
100 
101/**
102 * Skrypt walidacji formularzy "live" z natychmiastowym komunikatem dla 'checkedImportant'
103 */
104
105/*
106document.addEventListener('DOMContentLoaded', () => {
107    const forms = document.querySelectorAll('form.validate-live');
108    if (!forms.length) return;
109

110    forms.forEach(form => {
111        const inputs = form.querySelectorAll('[val]');
112        inputs.forEach(input => {
113            const errorBox = document.createElement('div');
114            errorBox.className = 'error-box';
115            input.insertAdjacentElement('afterend', errorBox);
116
117            const validateField = (forceCheck = false) => {
118                const valType = input.getAttribute('val');
119                const value = input.value.trim();
120                let valid = true;
121                let message = '';
122
123                if (valType === 'set' && !value) {
124                    valid = false;
125                    message = 'Pole jest wymagane';
126                } else if (valType === 'email') {
127                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
128                    if (!emailRegex.test(value)) {
129                        valid = false;
130                        message = 'Niepoprawny adres e-mail';
131                    }
132                } else if (valType === 'checked' && !input.checked && forceCheck) {
133                    valid = false;
134                    message = 'Zaznaczenie jest obowiązkowe';
135                } else if (valType === 'checkedImportant' && !input.checked) {
136                    valid = false;
137                    message = 'Zaznaczenie jest obowiązkowe';
138                }
139
140                if (!valid) {
141                    input.classList.add('input-error');
142                    errorBox.textContent = message;
143                    errorBox.style.display = 'block';
144                } else {
145                    input.classList.remove('input-error');
146                    errorBox.style.display = 'none';
147                }
148
149                return valid;
150            };
151
152            // przypisz funkcję walidacyjną
153            input._validateField = validateField;
154
155            // walidacja live
156            if (input.type === 'checkbox') {
157                input.addEventListener('change', () => validateField());
158            } else {
159                input.addEventListener('input', () => validateField());
160                input.addEventListener('blur', () => validateField());
161            }
162
163            // natychmiastowa walidacja dla checkedImportant
164            if (input.getAttribute('val') === 'checkedImportant') {
165                validateField(true);
166            }
167        });
168
169        form.addEventListener('submit', e => {
170            let allValid = true;
171
172            inputs.forEach(input => {
173                const valType = input.getAttribute('val');
174                const forceCheck = (valType === 'checkedImportant');
175
176                if (!input._validateField(forceCheck)) allValid = false;
177            });
178
179            if (!allValid) e.preventDefault();
180        });
181    });
182});
183*/
184
185
186/*wersja starsza bez 
187document.addEventListener('DOMContentLoaded', () => {
188    // Pobierz wszystkie formularze, które mają być walidowane live
189    const forms = document.querySelectorAll('form.validate-live');
190    if (!forms.length) return;
191
192    forms.forEach(form => {
193        const inputs = form.querySelectorAll('[val]');
194        inputs.forEach(input => {
195            let errorBox = document.createElement('div');
196            errorBox.className = 'error-box';
197            input.insertAdjacentElement('afterend', errorBox);
198
199            const validateField = () => {
200                let value = input.value.trim();
201                let valid = true;
202                let message = '';
203
204                const valType = input.getAttribute('val');
205
206                if (valType === 'set' && !value) {
207                    valid = false;
208                    message = 'Pole jest wymagane';
209                } else if (valType === 'email') {
210                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
211                    if (!emailRegex.test(value)) {
212                        valid = false;
213                        message = 'Niepoprawny adres e-mail';
214                    }
215                } else if (valType === 'checked' && !input.checked) {
216                    valid = false;
217                    message = 'Zaznaczenie jest obowiązkowe';
218                }
219
220                if (!valid) {
221                    input.classList.add('input-error');
222                    errorBox.textContent = message;
223                    errorBox.style.display = 'block';
224                } else {
225                    input.classList.remove('input-error');
226                    errorBox.style.display = 'none';
227                }
228
229                return valid;
230            };
231
232            if (input.type === 'checkbox') {
233                input.addEventListener('change', validateField);
234            } else {
235                input.addEventListener('input', validateField);
236                input.addEventListener('blur', validateField);
237            }
238        });
239
240        form.addEventListener('submit', e => {
241            let allValid = true;

242            inputs.forEach(input => {
243                input.dispatchEvent(new Event('blur', { bubbles: true }));
244                if (input.classList.contains('input-error')) allValid = false;
245            });
246            if (!allValid) e.preventDefault();
247        });
248    });
249});
250*/