Bonus: Kontaktformular Validierung – Feldspezifische Fehlermeldungen, E-Mail-Check, Danke-Nachricht im DOM
This commit is contained in:
parent
7b4edbe50c
commit
cc73e5f47c
3 changed files with 182 additions and 61 deletions
|
|
@ -2441,6 +2441,82 @@ textarea {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
Kontaktformular Validierung
|
||||
=========================== */
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 600;
|
||||
color: #d946ef;
|
||||
}
|
||||
|
||||
.field-error {
|
||||
display: block;
|
||||
margin-top: 0.35rem;
|
||||
font-size: 0.85rem;
|
||||
color: #dc2626;
|
||||
min-height: 1.1em;
|
||||
}
|
||||
|
||||
input.input-error,
|
||||
textarea.input-error {
|
||||
border-color: #dc2626 !important;
|
||||
background: #fff5f5;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
|
||||
}
|
||||
|
||||
body.dark input.input-error,
|
||||
body.dark textarea.input-error {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
|
||||
body.dark .field-error {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
body.dark .form-group label {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.form-success {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.85rem;
|
||||
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
|
||||
color: #166534;
|
||||
border: 2px solid #16a34a;
|
||||
border-radius: 14px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin-top: 1.25rem;
|
||||
font-size: 1rem;
|
||||
animation: fadeInUp 0.4s ease;
|
||||
}
|
||||
|
||||
.form-success-icon {
|
||||
font-size: 1.6rem;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
body.dark .form-success {
|
||||
background: linear-gradient(135deg, rgba(22, 163, 74, 0.15), rgba(21, 128, 61, 0.2));
|
||||
color: #86efac;
|
||||
border-color: #16a34a;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
Hamburger Menu Button
|
||||
=========================== */
|
||||
|
|
|
|||
135
js/script.js
135
js/script.js
|
|
@ -156,72 +156,105 @@ function openLightbox(imageSrc) {
|
|||
|
||||
function initializeContactForm() {
|
||||
const form = document.getElementById('contactForm');
|
||||
const formMessage = document.getElementById('formMessage');
|
||||
|
||||
if (!form) return;
|
||||
|
||||
|
||||
// Live-Validierung: Fehler beim Verlassen des Feldes clearen
|
||||
['name', 'email', 'subject', 'message'].forEach(function(id) {
|
||||
const field = document.getElementById(id);
|
||||
if (field) {
|
||||
field.addEventListener('input', function() {
|
||||
clearFieldError(id);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form data
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const email = document.getElementById('email').value.trim();
|
||||
const subject = document.getElementById('subject').value.trim();
|
||||
const message = document.getElementById('message').value.trim();
|
||||
|
||||
// Validate
|
||||
if (!name || !email || !subject || !message) {
|
||||
showFormMessage('Bitte füllen Sie alle Felder aus.', 'error');
|
||||
return;
|
||||
|
||||
let valid = true;
|
||||
|
||||
// Name prüfen
|
||||
if (!name) {
|
||||
showFieldError('name', 'Bitte gib deinen Namen ein.');
|
||||
valid = false;
|
||||
} else {
|
||||
clearFieldError('name');
|
||||
}
|
||||
|
||||
// Validate email format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
showFormMessage('Bitte geben Sie eine gültige E-Mail-Adresse ein.', 'error');
|
||||
return;
|
||||
|
||||
// E-Mail prüfen
|
||||
if (!email) {
|
||||
showFieldError('email', 'Bitte gib deine E-Mail-Adresse ein.');
|
||||
valid = false;
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
showFieldError('email', 'Die E-Mail-Adresse muss ein @ enthalten und gültig sein.');
|
||||
valid = false;
|
||||
} else {
|
||||
clearFieldError('email');
|
||||
}
|
||||
|
||||
// Show success message (in production, this would send to a server)
|
||||
showFormMessage(
|
||||
'Vielen Dank! Ihre Nachricht wurde erfolgreich eingegeben. ' +
|
||||
'(In einer produktiven Umgebung würde diese an den Server gesendet.)',
|
||||
'success'
|
||||
);
|
||||
|
||||
// Reset form
|
||||
|
||||
// Betreff prüfen
|
||||
if (!subject) {
|
||||
showFieldError('subject', 'Bitte gib einen Betreff ein.');
|
||||
valid = false;
|
||||
} else {
|
||||
clearFieldError('subject');
|
||||
}
|
||||
|
||||
// Nachricht prüfen
|
||||
if (!message) {
|
||||
showFieldError('message', 'Bitte schreib uns eine Nachricht.');
|
||||
valid = false;
|
||||
} else if (message.length < 10) {
|
||||
showFieldError('message', 'Die Nachricht sollte mindestens 10 Zeichen lang sein.');
|
||||
valid = false;
|
||||
} else {
|
||||
clearFieldError('message');
|
||||
}
|
||||
|
||||
if (!valid) return;
|
||||
|
||||
// Erfolg
|
||||
form.reset();
|
||||
|
||||
console.log('Form data:', { name, email, subject, message });
|
||||
['name', 'email', 'subject', 'message'].forEach(clearFieldError);
|
||||
|
||||
const formMessage = document.getElementById('formMessage');
|
||||
if (formMessage) {
|
||||
formMessage.innerHTML =
|
||||
'<div class="form-success">' +
|
||||
'<span class="form-success-icon">✅</span>' +
|
||||
'<div>' +
|
||||
'<strong>Danke für deine Nachricht!</strong><br>' +
|
||||
'Wir melden uns bald bei dir. 💕' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
formMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showFieldError(fieldId, message) {
|
||||
const field = document.getElementById(fieldId);
|
||||
const errorEl = document.getElementById('error-' + fieldId);
|
||||
if (field) field.classList.add('input-error');
|
||||
if (errorEl) errorEl.textContent = message;
|
||||
}
|
||||
|
||||
function clearFieldError(fieldId) {
|
||||
const field = document.getElementById(fieldId);
|
||||
const errorEl = document.getElementById('error-' + fieldId);
|
||||
if (field) field.classList.remove('input-error');
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
}
|
||||
|
||||
function showFormMessage(message, type) {
|
||||
const formMessage = document.getElementById('formMessage');
|
||||
if (!formMessage) return;
|
||||
|
||||
formMessage.textContent = message;
|
||||
formMessage.style.padding = '1rem';
|
||||
formMessage.style.marginTop = '1rem';
|
||||
formMessage.style.borderRadius = '6px';
|
||||
formMessage.style.borderLeft = '4px solid';
|
||||
|
||||
if (type === 'success') {
|
||||
formMessage.style.background = '#dcfce7';
|
||||
formMessage.style.color = '#166534';
|
||||
formMessage.style.borderLeftColor = '#16a34a';
|
||||
} else if (type === 'error') {
|
||||
formMessage.style.background = '#fee2e2';
|
||||
formMessage.style.color = '#991b1b';
|
||||
formMessage.style.borderLeftColor = '#dc2626';
|
||||
}
|
||||
|
||||
// Remove message after 5 seconds
|
||||
setTimeout(() => {
|
||||
formMessage.textContent = '';
|
||||
formMessage.style.background = '';
|
||||
formMessage.style.color = '';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// ===========================
|
||||
|
|
|
|||
32
kontakt.html
32
kontakt.html
|
|
@ -65,20 +65,32 @@
|
|||
<section>
|
||||
<h2>💬 Kontaktformular</h2>
|
||||
<p>Senden Sie uns eine Nachricht über das folgende Formular:</p>
|
||||
<form id="contactForm">
|
||||
<label for="name">Ihr Name *</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
<form id="contactForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">Ihr Name *</label>
|
||||
<input type="text" id="name" name="name" placeholder="z. B. Max Mustermann" autocomplete="name">
|
||||
<span class="field-error" id="error-name"></span>
|
||||
</div>
|
||||
|
||||
<label for="email">E-Mail-Adresse *</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail-Adresse *</label>
|
||||
<input type="email" id="email" name="email" placeholder="z. B. max@beispiel.de" autocomplete="email">
|
||||
<span class="field-error" id="error-email"></span>
|
||||
</div>
|
||||
|
||||
<label for="subject">Betreff *</label>
|
||||
<input type="text" id="subject" name="subject" required>
|
||||
<div class="form-group">
|
||||
<label for="subject">Betreff *</label>
|
||||
<input type="text" id="subject" name="subject" placeholder="z. B. Frage zum Projekt">
|
||||
<span class="field-error" id="error-subject"></span>
|
||||
</div>
|
||||
|
||||
<label for="message">Nachricht *</label>
|
||||
<textarea id="message" name="message" required></textarea>
|
||||
<div class="form-group">
|
||||
<label for="message">Nachricht *</label>
|
||||
<textarea id="message" name="message" placeholder="Schreib uns gerne alles, was dich beschäftigt! 💬" rows="5"></textarea>
|
||||
<span class="field-error" id="error-message"></span>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Nachricht senden</button>
|
||||
<button type="submit" class="btn">Nachricht senden 💌</button>
|
||||
</form>
|
||||
<div id="formMessage"></div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue