Example

// Ustaw scroll-behavior na auto globalnie document.documentElement.style.scrollBehavior = 'auto'; document.body.style.scrollBehavior = 'auto'; document.addEventListener('click', (event) => { // Znajdź najbliższy przycisk submit (nawet jeśli kliknięto w dziecko przycisku) const submitButton = event.target.closest('button[type="submit"], input[type="submit"]'); if (submitButton) { const form = submitButton.closest('form'); if (!form) return; // Znajdź błędne pola w tym konkretnym formularzu const invalidField = form.querySelector('input:invalid, select:invalid, textarea:invalid'); if (invalidField) { // NIE blokuj domyślnego zachowania - pozwól przeglądarce pokazać komunikat // Dostosuj pozycję po krótkim opóźnieniu (gdy przeglądarka już pokaże komunikat) setTimeout(() => { const fieldPosition = invalidField.getBoundingClientRect().top + window.scrollY; const targetPosition = Math.max(0, fieldPosition - 200); window.scrollTo({ top: targetPosition, behavior: 'auto' }); console.log('Dostosowano pozycję po pokazaniu komunikatu walidacyjnego'); }, 100); } } }); document.addEventListener('DOMContentLoaded', () => { const validationClass = 'validation-attempted'; const styleId = 'custom-form-validation-style'; // Dodaj style walidacji tylko raz if (!document.getElementById(styleId)) { const style = document.createElement('style'); style.id = styleId; style.textContent = ` form.${validationClass} input:invalid:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), form.${validationClass} textarea:invalid, form.${validationClass} select:invalid, form.${validationClass} .elementor-field-subgroup:has(input[type="radio"]:invalid), form.${validationClass} .elementor-field-subgroup:has(input[type="checkbox"]:invalid) { outline: 1px solid rgba(255, 0, 0, 0.64) !important; outline-offset: 0; } `; document.head.appendChild(style); } // Kliknięcie przycisku wysyłania document.addEventListener('click', (event) => { const submitButton = event.target.closest( 'button[type="submit"], input[type="submit"]' ); if (!submitButton) { return; } const form = submitButton.closest('form'); if (!form) { return; } document.documentElement.style.scrollBehavior = 'auto'; document.body.style.scrollBehavior = 'auto'; /* * Usuń poprzedni stan przed ponowną walidacją. * Jeśli formularz zawiera błędy, zdarzenie "invalid" * ponownie doda tę klasę. */ form.classList.remove(validationClass); }); // Dodaj czerwone obrysy tylko wtedy, gdy formularz jest nieprawidłowy document.addEventListener( 'invalid', (event) => { const form = event.target.closest('form'); if (!form) { return; } document.documentElement.style.scrollBehavior = 'auto'; document.body.style.scrollBehavior = 'auto'; form.classList.add(validationClass); }, true ); // Poprawne wysłanie formularza — usuń czerwone obrysy document.addEventListener( 'submit', (event) => { const form = event.target.closest('form'); if (form) { form.classList.remove(validationClass); } }, true ); // Wyczyszczenie formularza — również usuń czerwone obrysy document.addEventListener( 'reset', (event) => { const form = event.target.closest('form'); if (form) { form.classList.remove(validationClass); } }, true ); // Dodatkowa obsługa poprawnego wysłania formularza Elementor Pro if (window.jQuery) { jQuery(document).on('submit_success', (event) => { const target = event.target; const form = target.matches?.('form') ? target : target.closest?.('form') || target.querySelector?.('form'); if (form) { form.classList.remove(validationClass); } }); } });