So verwenden Sie Javascript zum Erstellen von mehrstufigen Formularen mit Validierung

Sie können auch einen Fortschrittsindikator hinzufügen (z. B. Schrittzahlen oder eine Fortschrittsleiste), um den Benutzern zu zeigen, wo sie sich befinden und wie viel übrig bleibt.

Aufbau der HTML Shell

Jeder Schritt ist ein mit einer Klasse von . Nur der erste Schritt ist standardmäßig sichtbar; die anderen werden mit ausgeblendet.

<form id="multiStepForm">
 <!-- Step 1: Personal Information -->
 <div class="step active" id="step1">
 <h3>Step 1: Personal Information</h3>
 <label for="name">Full Name</label>
 <input type="text" id="name" name="name" required />
 <button type="button" class="next-btn">Next</button>
 </div>

 <!-- Step 2: Contact Details -->
 <div class="step" id="step2" style="display:none">
 <h3>Step 2: Contact Details</h3>
 <label for="email">Email Address</label>
 <input type="email" id="email" name="email" required />
 <label for="phone">Phone Number</label>
 <input type="tel" id="phone" name="phone" />
 <button type="button" class="prev-btn">Previous</button>
 <button type="button" class="next-btn">Next</button>
 </div>

 <!-- Step 3: Confirmation -->
 <div class="step" id="step3" style="display:none">
 <h3>Step 3: Review & Submit</h3>
 <p>Please review your information before submitting.</p>
 <button type="button" class="prev-btn">Previous</button>
 <button type="submit">Submit</button>
 </div>
</form>

Wichtig: Verwenden Sie für Navigationsschaltflächen, um eine versehentliche Formulareingabe zu verhindern.

CSS: Verwalten von Sichtbarkeit und Styling

Anstatt sich auf Inline zu verlassen , ist es sauberer, CSS-Klassen zu verwenden.

.step {
 display: none;
}
.step.active {
 display: block;
}

Dann entfernen Sie im HTML die Inline-Attribute und fügen nur zum ersten Schritt hinzu. JavaScript schaltet die Klasse um, um Schritte anzuzeigen/zu verbergen.

Sie können auch Übergänge, Fortschrittsbalken und konsistente Abstände hinzufügen, zum Beispiel:

.step {
 opacity: 0;
 transition: opacity 0.3s ease;
}
.step.active {
 opacity: 1;
 display: block;
}

Dadurch entsteht beim Schalten von Schritten ein glatter Einblendeffekt.

JavaScript: Navigation und Validierung

Jetzt schreiben wir die Kernlogik: Bewegen zwischen Schritten, Validierung der Felder jedes Schritts und Aktualisieren der Benutzeroberfläche.

DOM-Elemente auswählen

const steps = document.querySelectorAll('.step');
const nextBtns = document.querySelectorAll('.next-btn');
const prevBtns = document.querySelectorAll('.prev-btn');
let currentStep = 0; // index of the currently visible step

Navigationsfunktionen

function showStep(stepIndex) {
 steps.forEach((step, index) => {
 step.classList.toggle('active', index === stepIndex);
 });
 currentStep = stepIndex;
}

function nextStep() {
 if (validateStep(currentStep)) {
 showStep(currentStep + 1);
 }
}

function prevStep() {
 showStep(currentStep - 1);
}

Validierung pro Schritt

Schreibe eine Funktion, die alle erforderlichen Felder im aktuellen Schritt überprüft und Fehlermeldungen anzeigt. Der Einfachheit halber verwenden wir in diesem Beispiel , aber ein Produktionsformular sollte Inline-Fehlermeldungen neben den Feldern anzeigen.

function validateStep(stepIndex) {
 const currentStepDiv = steps[stepIndex];
 const inputs = currentStepDiv.querySelectorAll('input[required]');

 for (let input of inputs) {
 if (!input.value.trim()) {
 alert(`Please fill in "${input.placeholder || input.name}".`);
 input.focus();
 return false;
 }
 // Additional validation per type can be added here
 if (input.type === 'email' && !isValidEmail(input.value)) {
 alert('Please enter a valid email address.');
 input.focus();
 return false;
 }
 }
 return true;
}

function isValidEmail(email) {
 const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 return re.test(email.trim());
}

Anwesende Event-Hörer

nextBtns.forEach(btn => btn.addEventListener('click', nextStep));
prevBtns.forEach(btn => btn.addEventListener('click', prevStep));

Hinweis: Dies setzt voraus, dass jeder Schritt genau eine “Next”- und eine “Previous”-Taste hat.

Fortgeschrittene Validierungstechniken

Während grundlegende Feldprüfungen unerlässlich sind, profitieren moderne Formulare von einer ausgefeilteren Validierung, die die Benutzererfahrung und Datenqualität verbessert.

HTML5 Constraint Validation

Moderne Browser unterstützen die eingebaute Validierung für , , , usw. Sie können die -Methode und die Pseudo-Klasse für das Styling nutzen.

function validateStepHTML5(stepIndex) {
 const currentStepDiv = steps[stepIndex];
 const inputs = currentStepDiv.querySelectorAll('input, select, textarea');

 for (let input of inputs) {
 if (!input.checkValidity()) {
 input.reportValidity(); // shows the browser's native error tooltip
 return false;
 }
 }
 return true;
}

Echtzeit-Inline-Validierung

Um den Benutzern beim Tippen sofortiges Feedback zu geben, hören Sie auf oder Ereignisse in einzelnen Feldern.

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
 if (this.value && !isValidEmail(this.value)) {
 this.classList.add('invalid');
 // show an error message next to the field
 } else {
 this.classList.remove('invalid');
 }
});

Custom Regex Validation

Für Felder wie Telefonnummern, Postleitzahlen oder Passwörter verwenden Sie -Attribute oder benutzerdefinierte Regex.

<input type="tel" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" />

Dann können Sie in JavaScript überprüfen oder den Wert mit Ihrem eigenen Regex testen.

Hinzufügen eines Fortschrittsindikators

Eine Fortschrittsleiste oder ein Schrittzähler hilft dem Benutzer zu verstehen, wie viele Schritte bleiben, und reduziert die Angst. Hier ist eine einfache Implementierung mit JavaScript und CSS.

HTML-Struktur für Fortschrittsschritte

<div id="progress">
 <span class="progress-step active">1</span>
 <span class="progress-step">2</span>
 <span class="progress-step">3</span>
</div>

CSS Styling

.progress-step {
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 border-radius: 50%;
 background: #ccc;
 color: #fff;
}
.progress-step.active {
 background: #007bff;
}

JavaScript Update

Aktualisieren Sie innerhalb der Funktion auch die Fortschrittsindikatoren:

function showStep(stepIndex) {
 steps.forEach((step, index) => {
 step.classList.toggle('active', index === stepIndex);
 });
 document.querySelectorAll('.progress-step').forEach((el, index) => {
 el.classList.toggle('active', index === stepIndex);
 });
 currentStep = stepIndex;
}

Sie können auch einen linearen Fortschrittsbalken hinzufügen, indem Sie den Prozentsatz berechnen: [FLT: 36] und die Breite eines [FLT: 37] festlegen.

Umgang mit Edge Cases und User Experience Details

Um eine produktionsbereite mehrstufige Form zu erstellen, sollten Sie diese zusätzlichen Aspekte berücksichtigen:

Tastaturnavigation

Benutzer sollten in der Lage sein, mit der Enter-Taste vorwärts zu gehen (die Schaltfläche “Weiter” auslösen) und rückwärts mit Escape oder einer dedizierten Verknüpfung.

document.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && e.target.closest('.step.active')) {
 const nextBtn = document.querySelector('.step.active .next-btn');
 if (nextBtn) nextBtn.click();
 }
});

Mehrere Einreichungen verhindern

Deaktivieren Sie den Absenden-Button nach dem ersten Klick, um doppelte Formulareinsendungen zu vermeiden:

const submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function() {
 this.disabled = true;
 this.textContent = 'Submitting…';
 // The form will submit naturally after this
});

Speichern von Daten vorübergehend

Wenn der Benutzer versehentlich die Seite aktualisiert, verlieren sie alle eingegebenen Daten. Erwägen Sie, Feldwerte in oder zu speichern, während der Benutzer fortschreitet.

Sicherheitsüberlegungen

Die Client-seitige Validierung dient nur der Benutzererfahrung; validieren und bereinigen Sie immer Daten auf dem Server. Verwenden Sie HTTPS und erwägen Sie, CSRF-Token für sensible Formulare hinzuzufügen.

Zugänglichkeit (A11y) Best Practices

Mehrstufige Formulare können für Screenreader-Benutzer eine Herausforderung darstellen, wenn sie nicht korrekt codiert sind.

• Benutze und , um jeden Schritt logisch zu gruppieren.
• Kündigen Sie Schrittänderungen mit ARIA live regions an (z. B. ), damit Bildschirmleser wissen, dass neue Inhalte erschienen sind.
• Fügen Sie zum aktuellen Fortschrittsschritt hinzu.
• Stellen Sie sicher, dass Fehlermeldungen programmgesteuert mit den Eingabefeldern verknüpft sind (verwenden Sie .
• Stellen Sie sicher, dass alle interaktiven Elemente auf der Tastatur zugänglich sind und sichtbare Fokusindikatoren haben.

<div class="step active" id="step1" aria-live="polite">
 <h3>Step 1 of 3: Personal Information</h3>
 <label for="name">Full Name</label>
 <input type="text" id="name" name="name" required />
 <span id="name-error" class="error" role="alert"></span>
</div>

Wenn die Validierung fehlschlägt, fügen Sie die Fehlermeldung in die ein und sie wird angekündigt.

Alles zusammenbringen: Ein vollständiges Beispiel

Nachfolgend finden Sie eine kompakte Version eines voll funktionsfähigen mehrstufigen Formulars mit Validierung und Fortschrittsindikator, die Sie an Ihre eigenen Projekte anpassen können.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Multi‑Step Form with Validation</title>
 <style>
 .step { display: none; }
 .step.active { display: block; }
 .progress-step { background: #ccc; padding: 5px 10px; margin: 0 2px; }
 .progress-step.active { background: #007bff; color: #fff; }
 .error { color: red; font-size: 0.9em; }
 </style>
</head>
<body>
 <form id="multiStepForm" novalidate>
 <div id="progress">
 <span class="progress-step active">1</span>
 <span class="progress-step">2</span>
 <span class="progress-step">3</span>
 </div>

 <div class="step active" id="step1">
 <h3>Step 1: Personal Information</h3>
 <label for="name">Full Name *</label>
 <input type="text" id="name" name="name" required minlength="2">
 <button type="button" class="next-btn">Next</button>
 </div>

 <div class="step" id="step2">
 <h3>Step 2: Contact Details</h3>
 <label for="email">Email *</label>
 <input type="email" id="email" name="email" required>
 <button type="button" class="prev-btn">Previous</button>
 <button type="button" class="next-btn">Next</button>
 </div>

 <div class="step" id="step3">
 <h3>Step 3: Submit</h3>
 <p>Review your details and submit.</p>
 <button type="button" class="prev-btn">Previous</button>
 <button type="submit">Submit</button>
 </div>
 </form>

 <script>
 const steps = document.querySelectorAll('.step');
 const nextBtns = document.querySelectorAll('.next-btn');
 const prevBtns = document.querySelectorAll('.prev-btn');
 const progressSteps = document.querySelectorAll('.progress-step');
 let currentStep = 0;

 function showStep(index) {
 steps.forEach((step, i) => step.classList.toggle('active', i === index));
 progressSteps.forEach((step, i) => step.classList.toggle('active', i === index));
 currentStep = index;
 }

 function validateCurrentStep() {
 const stepDiv = steps[currentStep];
 const inputs = stepDiv.querySelectorAll('input[required]');
 for (let input of inputs) {
 if (!input.checkValidity()) {
 input.reportValidity();
 return false;
 }
 }
 return true;
 }

 nextBtns.forEach(btn => {
 btn.addEventListener('click', function(e) {
 if (validateCurrentStep()) {
 showStep(currentStep + 1);
 }
 });
 });

 prevBtns.forEach(btn => {
 btn.addEventListener('click', function(e) {
 showStep(currentStep - 1);
 });
 });

 // Optional: handle Enter key
 document.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && e.target.closest('.step.active')) {
 const nextBtn = document.querySelector('.step.active .next-btn');
 if (nextBtn) nextBtn.click();
 }
 });
 </script>
</body>
</html>

In diesem Beispiel wird die HTML5-Validierung () und die eingebauten Fehlermeldungen verwendet.

Weiteres Lesen und Ressourcen

Um Ihr Verständnis von Formularvalidierung und Zugänglichkeit zu vertiefen, überprüfen Sie diese Ressourcen:

• MDN: Client-Side Form Validation
• WAI Web Accessibility Tutorials: Multi-Page Forms
• MDN: ARIA Live Regions
• Directus Blog: Building Better Forms (für Backend-Integrationsideen)

Umhüllen

Mehrstufige Formulare, die mit JavaScript erstellt wurden, sind ein leistungsstarkes Werkzeug zur Verbesserung der Benutzererfahrung und Datengenauigkeit. Durch die Aufteilung eines langen Formulars in überschaubare Abschnitte, die Validierung von Eingaben bei jedem Schritt und die Bereitstellung visueller Fortschrittshinweise können Sie die Formularabbruch drastisch reduzieren und sauberere Daten sammeln.

Beginnen Sie mit einer soliden HTML-Struktur, einer Ebene in CSS für visuelles Feedback und fügen Sie dann JavaScript für Navigation und Validierung hinzu. Erweitern Sie Ihr Formular mit Echtzeit-Validierung, Fortschrittsindikatoren und Zugänglichkeitsfunktionen, um es für alle nutzbar zu machen. Denken Sie schließlich immer daran, dass die clientseitige Validierung eine Bequemlichkeit ist - verlassen Sie sich niemals allein darauf. Validieren Sie alle Daten auch auf dem Server.

Experimentieren Sie mit verschiedenen Designs und Validierungstechniken, die den Anforderungen Ihrer Anwendung entsprechen. Die hier gezeigten Techniken bieten eine Grundlage, die Sie für jedes mehrstufige Formularprojekt anpassen und erweitern können.