61 lines
2.4 KiB
JavaScript
61 lines
2.4 KiB
JavaScript
// 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 ? '<ul><li>' + errorMessages.join('</li><li>') + '</li></ul>' : '';
|
|
|
|
if (!valid) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
});
|