Validierung und Formular-Handling

Geschätzte Lektüre: 15 Minuten 371 Ansichten

ormulare sind ein wesentlicher Bestandteil moderner Webanwendungen, die es Nutzern ermöglichen, Daten einzugeben und an den Server zu senden. JavaScript spielt eine cruciale Rolle bei der clientseitigen Verarbeitung dieser Formulare.

Grundlegendes Formular-Handling

<form id="myForm">
  <input type="text" id="username" name="username">
  <button type="submit">Absenden</button>
</form>

<script>
  const form = document.getElementById('myForm');
  
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // Verhindert das Neuladen der Seite
    
    const username = document.getElementById('username').value;
    console.log('Benutzername:', username);
    
    // Hier könnten wir die Daten an den Server senden
  });
</script>

Formular-Validierung

Die Validierung stellt sicher, dass die eingegebenen Daten den gewünschten Kriterien entsprechen, bevor sie an den Server gesendet werden.

Arten der Validierung

  • Clientseitige Validierung (mit JavaScript)
  • Serverseitige Validierung (z.B. mit PHP, Node.js)

HTML5 Built-in Validation

Moderne Browser unterstützen grundlegende Validierung durch HTML-Attribute:

<input type="text" required minlength="3" maxlength="20" pattern="[A-Za-z]+">

JavaScript Validierungstechniken

Grundlegende Validierung:

function validateForm() {
  const username = document.getElementById('username').value;
  
  if (username === '') {
    alert('Benutzername darf nicht leer sein');
    return false;
  }
  
  if (username.length < 3) {
    alert('Benutzername muss mindestens 3 Zeichen lang sein');
    return false;
  }
  
  return true;
}

Reguläre Ausdrücke für komplexe Validierungen:

function validateEmail(email) {
  const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return re.test(String(email).toLowerCase());
}

if (!validateEmail('test@example.com')) {
  console.log('Ungültige E-Mail-Adresse');
}

Echtzeit-Validierung (on-the-fly):

document.getElementById('email').addEventListener('input', function() {
  const email = this.value;
  const feedback = document.getElementById('email-feedback');
  
  if (!validateEmail(email)) {
    feedback.textContent = 'Bitte geben Sie eine gültige E-Mail-Adresse ein';
    this.classList.add('invalid');
  } else {
    feedback.textContent = '';
    this.classList.remove('invalid');
  }
});

Passwortstärke-Prüfung:

function checkPasswordStrength(password) {
  let strength = 0;
  
  // Länge überprüfen
  if (password.length >= 8) strength++;
  if (password.length >= 12) strength++;
  
  // Verschiedene Zeichentypen
  if (/[a-z]/.test(password)) strength++;
  if (/[A-Z]/.test(password)) strength++;
  if (/[0-9]/.test(password)) strength++;
  if (/[^a-zA-Z0-9]/.test(password)) strength++;
  
  return strength;
}

const password = 'SicheresPasswort123!';
console.log('Passwortstärke:', checkPasswordStrength(password));

Fortgeschrittene Validierungstechniken

Benutzerdefinierte Validierungsmeldungen:

const emailInput = document.getElementById('email');

emailInput.addEventListener('invalid', function() {
  if (emailInput.validity.valueMissing) {
    emailInput.setCustomValidity('Bitte geben Sie eine E-Mail-Adresse ein');
  } else if (emailInput.validity.typeMismatch) {
    emailInput.setCustomValidity('Dies sieht nicht wie eine gültige E-Mail-Adresse aus');
  } else {
    emailInput.setCustomValidity('');
  }
});

emailInput.addEventListener('input', function() {
  emailInput.setCustomValidity('');
});

Asynchrone Validierung (z.B. Benutzername verfügbar?):

async function checkUsernameAvailability(username) {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    return data.available;
  } catch (error) {
    console.error('Fehler bei der Überprüfung:', error);
    return false;
  }
}

document.getElementById('username').addEventListener('blur', async function() {
  const feedback = document.getElementById('username-feedback');
  
  if (this.value.length < 3) {
    feedback.textContent = 'Benutzername zu kurz';
    return;
  }
  
  feedback.textContent = 'Überprüfe Verfügbarkeit...';
  const isAvailable = await checkUsernameAvailability(this.value);
  
  if (isAvailable) {
    feedback.textContent = 'Benutzername verfügbar!';
  } else {
    feedback.textContent = 'Benutzername bereits vergeben';
  }
});

Cross-Field Validierung (z.B. Passwortbestätigung):

function validatePasswordMatch() {
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  const feedback = document.getElementById('password-match-feedback');
  
  if (password !== confirmPassword) {
    feedback.textContent = 'Passwörter stimmen nicht überein';
    return false;
  }
  
  feedback.textContent = '';
  return true;
}

document.getElementById('confirm-password').addEventListener('input', validatePasswordMatch);

Formular-Absendung mit AJAX

document.getElementById('myForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  
  if (!validateForm()) return;
  
  const formData = new FormData(this);
  const submitButton = this.querySelector('button[type="submit"]');
  
  try {
    submitButton.disabled = true;
    submitButton.textContent = 'Wird gesendet...';
    
    const response = await fetch('/api/submit-form', {
      method: 'POST',
      body: formData
    });
    
    const result = await response.json();
    
    if (result.success) {
      showSuccessMessage('Formular erfolgreich übermittelt!');
      this.reset();
    } else {
      showErrorMessage(result.message || 'Fehler beim Senden des Formulars');
    }
  } catch (error) {
    showErrorMessage('Netzwerkfehler: ' + error.message);
  } finally {
    submitButton.disabled = false;
    submitButton.textContent = 'Absenden';
  }
});

function showSuccessMessage(message) {
  const div = document.createElement('div');
  div.className = 'alert success';
  div.textContent = message;
  document.body.prepend(div);
  setTimeout(() => div.remove(), 5000);
}

function showErrorMessage(message) {
  const div = document.createElement('div');
  div.className = 'alert error';
  div.textContent = message;
  document.body.prepend(div);
  setTimeout(() => div.remove(), 5000);
}

FormData API

Die FormData API bietet eine bequeme Möglichkeit, Formulardaten zu sammeln und zu verarbeiten.

const form = document.getElementById('myForm');
const formData = new FormData(form);

// Werte auslesen
console.log(formData.get('username'));

// Werte hinzufügen oder ändern
formData.set('newField', 'value');

// Durch alle Einträge iterieren
for (let [key, value] of formData.entries()) {
  console.log(key, value);
}

// Für AJAX verwenden
fetch('/endpoint', {
  method: 'POST',
  body: formData
});

Datei-Uploads validieren

document.getElementById('file-upload').addEventListener('change', function() {
  const file = this.files[0];
  const feedback = document.getElementById('file-feedback');
  
  if (!file) return;
  
  // Dateityp validieren
  const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
  if (!allowedTypes.includes(file.type)) {
    feedback.textContent = 'Nur JPG, PNG oder PDF Dateien sind erlaubt';
    this.value = '';
    return;
  }
  
  // Dateigröße validieren (max. 5MB)
  const maxSize = 5 * 1024 * 1024; // 5MB in Bytes
  if (file.size > maxSize) {
    feedback.textContent = 'Datei ist zu groß (max. 5MB)';
    this.value = '';
    return;
  }
  
  feedback.textContent = 'Datei ausgewählt: ' + file.name;
});

Dynamische Formulare

Felder dynamisch hinzufügen

document.getElementById('add-email').addEventListener('click', function() {
  const container = document.getElementById('email-container');
  const newField = document.createElement('div');
  newField.className = 'email-field';
  newField.innerHTML = `
    <input type="email" name="additional-emails[]" placeholder="Zusätzliche E-Mail">
    <button type="button" class="remove-email">×</button>
  `;
  container.appendChild(newField);
});

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('remove-email')) {
    e.target.parentElement.remove();
  }
});

Bedingte Felder

document.getElementById('newsletter').addEventListener('change', function() {
  const emailField = document.getElementById('newsletter-email');
  emailField.style.display = this.checked ? 'block' : 'none';
  if (!this.checked) emailField.querySelector('input').value = '';
});

Barrierefreiheit (Accessibility) in Formularen

<div class="form-group">
  <label for="username">Benutzername:</label>
  <input type="text" id="username" name="username" aria-describedby="username-help">
  <small id="username-help" class="help-text">Mindestens 3 Zeichen</small>
  <span id="username-error" class="error-text" aria-live="polite"></span>
</div>

<script>
  function showError(fieldId, message) {
    const field = document.getElementById(fieldId);
    const errorElement = document.getElementById(`${fieldId}-error`);
    
    errorElement.textContent = message;
    field.setAttribute('aria-invalid', 'true');
    field.focus();
  }
  
  function clearError(fieldId) {
    const field = document.getElementById(fieldId);
    const errorElement = document.getElementById(`${fieldId}-error`);
    
    errorElement.textContent = '';
    field.removeAttribute('aria-invalid');
  }
</script>

Formular-Validierungsbibliotheken

Für komplexe Formulare können Bibliotheken wie:

  • Validator.js – Einfache Validierungsfunktionen
  • Yup – Schema-basierte Validierung
  • Joi – Ähnlich wie Yup, aber mit mehr Funktionen
  • Formik – React-Formularverwaltung mit Validierung
  • VeeValidate – Vue.js Formularvalidierung

Beispiel mit Yup:

import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required().min(3).max(20),
  email: yup.string().email().required(),
  age: yup.number().positive().integer().min(18),
  password: yup.string().min(8).matches(
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])/,
    'Passwort muss Großbuchstaben, Kleinbuchstaben, Zahlen und Sonderzeichen enthalten'
  ),
  confirmPassword: yup.string()
    .oneOf([yup.ref('password'), null], 'Passwörter müssen übereinstimmen')
});

async function validateForm(formData) {
  try {
    await schema.validate(formData, { abortEarly: false });
    return { isValid: true, errors: {} };
  } catch (err) {
    const errors = {};
    err.inner.forEach(error => {
      errors[error.path] = error.message;
    });
    return { isValid: false, errors };
  }
}

Best Practices für Formular-Handling

  • Client- und Serverseitige Validierung – Nie ausschließlich auf clientseitige Validierung verlassen
  • Klare Fehlermeldungen – Spezifisch und hilfreich formulieren
  • Echtzeit-Feedback – Nutzer sofort über Probleme informieren
  • Barrierefreiheit – Screenreader-kompatible Formulare gestalten
  • Sicherheit – Sensible Daten verschlüsseln, CSRF-Token verwenden
  • Benutzerfreundlichkeit – Formularlogik intuitiv gestalten
  • Performance – Große Formulare optimieren, unnötige Validierung vermeiden

Essentiell

JavaScript-Validierung und Formular-Handling sind essentielle Fähigkeiten für Webentwickler. Durch die Kombination von HTML5-Validierung, JavaScript und serverseitiger Überprüfung können Sie sichere, benutzerfreundliche und robuste Formulare erstellen. Moderne Techniken wie asynchrone Validierung, dynamische Formulare und Accessibility-Features verbessern die Nutzererfahrung erheblich.

Dieses Dokument teilen

Validierung und Formular-Handling

Oder Link kopieren

INHALT

Abonnieren

×
Cancel