69 lines
2.3 KiB
JavaScript
69 lines
2.3 KiB
JavaScript
const loginForm = document.getElementById('loginForm');
|
|
const emailInput = document.getElementById('email');
|
|
const passwortInput = document.getElementById('passwort');
|
|
const emailError = document.getElementById('emailError');
|
|
const passwortError = document.getElementById('passwortError');
|
|
|
|
// Validierungsfunktion
|
|
function validateForm(event) {
|
|
event.preventDefault();
|
|
|
|
let isValid = true;
|
|
|
|
// Email-Validierung
|
|
const emailValue = emailInput.value.trim();
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
const emailGroup = emailInput.parentElement;
|
|
|
|
if (!emailValue) {
|
|
emailGroup.classList.add('has-error');
|
|
emailError.textContent = 'Bitte gib deine E-Mail Adresse ein.';
|
|
isValid = false;
|
|
} else if (!emailRegex.test(emailValue)) {
|
|
emailGroup.classList.add('has-error');
|
|
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');
|
|
passwortError.textContent = 'Bitte gib dein Passwort ein.';
|
|
isValid = false;
|
|
} else if (passwortValue.length < 6) {
|
|
passwortGroup.classList.add('has-error');
|
|
passwortError.textContent = 'Dein Passwort ist zu kurz. Bitte überprüfe dein Passwort.';
|
|
isValid = false;
|
|
} else {
|
|
passwortGroup.classList.remove('has-error');
|
|
}
|
|
|
|
// Wenn alle Validierungen bestanden, Form absenden
|
|
if (isValid) {
|
|
alert('Login erfolgreich! (Dies ist eine Demo)');
|
|
// Hier würde später die Anmeldung zum Backend gesendet
|
|
}
|
|
}
|
|
|
|
// Fehlerbehandlung bei Input-Änderung (entfernt Fehler wenn Benutzer korrigiert)
|
|
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');
|
|
}
|
|
});
|
|
|
|
// Form Submit Event
|
|
loginForm.addEventListener('submit', validateForm); |