128 lines
4.0 KiB
JavaScript
128 lines
4.0 KiB
JavaScript
const signupForm = document.getElementById('signupForm');
|
|
const vornameInput = document.getElementById('vorname');
|
|
const nachnameInput = document.getElementById('nachname');
|
|
const emailInput = document.getElementById('email');
|
|
const passwortInput = document.getElementById('passwort');
|
|
const welcomeModal = document.getElementById('welcomeModal');
|
|
|
|
// Funktion zum Öffnen des Welcome Modals
|
|
function openWelcomeModal() {
|
|
welcomeModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
// Funktion zum Schließen des Welcome Modals
|
|
function closeWelcomeModal() {
|
|
welcomeModal.classList.remove('show');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
// Validierungsfunktion
|
|
function validateForm(event) {
|
|
event.preventDefault();
|
|
|
|
let isValid = true;
|
|
|
|
// Vorname-Validierung
|
|
const vornameValue = vornameInput.value.trim();
|
|
const vornameGroup = vornameInput.parentElement;
|
|
|
|
if (!vornameValue) {
|
|
vornameGroup.classList.add('has-error');
|
|
isValid = false;
|
|
} else {
|
|
vornameGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Nachname-Validierung
|
|
const nachnameValue = nachnameInput.value.trim();
|
|
const nachnameGroup = nachnameInput.parentElement;
|
|
|
|
if (!nachnameValue) {
|
|
nachnameGroup.classList.add('has-error');
|
|
isValid = false;
|
|
} else {
|
|
nachnameGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Email-Validierung
|
|
const emailValue = emailInput.value.trim();
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const emailGroup = emailInput.parentElement;
|
|
|
|
if (!emailValue) {
|
|
emailGroup.classList.add('has-error');
|
|
document.getElementById('emailError').textContent = 'Bitte gib deine E-Mail Adresse ein.';
|
|
isValid = false;
|
|
} else if (!emailRegex.test(emailValue)) {
|
|
emailGroup.classList.add('has-error');
|
|
document.getElementById('emailError').textContent = 'Bitte gib eine gültige E-Mail Adresse ein.';
|
|
isValid = false;
|
|
} else {
|
|
emailGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Passwort-Validierung
|
|
const passwortValue = passwortInput.value;
|
|
const passwortGroup = passwortInput.parentElement;
|
|
|
|
if (!passwortValue) {
|
|
passwortGroup.classList.add('has-error');
|
|
document.getElementById('passwortError').textContent = 'Bitte gib ein Passwort ein.';
|
|
isValid = false;
|
|
} else if (passwortValue.length < 8) {
|
|
passwortGroup.classList.add('has-error');
|
|
document.getElementById('passwortError').textContent = 'Dein Passwort muss mindestens 8 Zeichen lang sein.';
|
|
isValid = false;
|
|
} else {
|
|
passwortGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Wenn alle Validierungen bestanden, Modal anzeigen
|
|
if (isValid) {
|
|
openWelcomeModal();
|
|
// Hier würde später die Registrierung zum Backend gesendet
|
|
|
|
// Weiterleitung zur event overview Page
|
|
window.location.href = 'event_overview.html';
|
|
}
|
|
}
|
|
|
|
// Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert)
|
|
vornameInput.addEventListener('input', function() {
|
|
const vornameGroup = this.parentElement;
|
|
if (this.value.trim()) {
|
|
vornameGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
nachnameInput.addEventListener('input', function() {
|
|
const nachnameGroup = this.parentElement;
|
|
if (this.value.trim()) {
|
|
nachnameGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
emailInput.addEventListener('input', function() {
|
|
const emailGroup = this.parentElement;
|
|
if (this.value.trim()) {
|
|
emailGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
passwortInput.addEventListener('input', function() {
|
|
const passwortGroup = this.parentElement;
|
|
if (this.value) {
|
|
passwortGroup.classList.remove('has-error');
|
|
}
|
|
});
|
|
|
|
// Modal schließen wenn außerhalb geklickt wird
|
|
welcomeModal.addEventListener('click', function(event) {
|
|
if (event.target === welcomeModal) {
|
|
closeWelcomeModal();
|
|
}
|
|
});
|
|
|
|
// Form Submit Event
|
|
signupForm.addEventListener('submit', validateForm); |