diff --git a/assets/frontend-form.js b/assets/frontend-form.js new file mode 100644 index 0000000..bdc7f85 --- /dev/null +++ b/assets/frontend-form.js @@ -0,0 +1,60 @@ +// Client-side validation for Workshopwahl frontend form +// This script validates required fields and email format before submission + +document.addEventListener('DOMContentLoaded', function () { + var form = document.querySelector('.kc-workshopwahl-form'); + if (!form) return; + + form.addEventListener('submit', function (e) { + var valid = true; + var errorMessages = []; + + // Example: Validate required text fields + var requiredFields = form.querySelectorAll('[required]'); + requiredFields.forEach(function (field) { + if (!field.value.trim()) { + valid = false; + errorMessages.push(field.getAttribute('data-label') || field.name + ' ist erforderlich.'); + field.classList.add('kc-field-error'); + } else { + field.classList.remove('kc-field-error'); + } + }); + + // Example: Validate email format + var emailField = form.querySelector('input[type="email"]'); + if (emailField && emailField.value) { + var emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/; + if (!emailPattern.test(emailField.value)) { + valid = false; + errorMessages.push('Bitte eine gültige E-Mail-Adresse eingeben.'); + emailField.classList.add('kc-field-error'); + } else { + emailField.classList.remove('kc-field-error'); + } + } + + // Example: Validate max workshop selections (if relevant) + var maxWorkshops = parseInt(form.getAttribute('data-max-workshops'), 10); + if (maxWorkshops) { + var checked = form.querySelectorAll('input[type="checkbox"][name^="workshop_"]:checked'); + if (checked.length > maxWorkshops) { + valid = false; + errorMessages.push('Es dürfen maximal ' + maxWorkshops + ' Workshops gewählt werden.'); + } + } + + // Show error messages + var errorBox = form.querySelector('.kc-form-errors'); + if (!errorBox) { + errorBox = document.createElement('div'); + errorBox.className = 'kc-form-errors'; + form.prepend(errorBox); + } + errorBox.innerHTML = errorMessages.length ? '