Geçerlilik ile Multi- Adım Formları Oluşturmak için Javascript nasıl kullanılır

MultiStep Formları Kullanıcı Dostu Veri Koleksiyonu için Akıllı Bir Seçim Neden

Uzun, tek sayfa genellikle düşük kullanıcılar ve daha yüksek terk oranlarına yol açıyor. Bir form mantıksal adımlara - bir seferde bir ekran - bilişsel yükü azaltır ve süreci daha yönetilebilir hissettiren çok adımlı formlar kullanıcıların her parça boyunca kontrol edilebilir olduğunu gösterir, bu da tamamlanma oranları ve veri kalitesi geliştirir.

Teknik bir bakış açısıyla, JavaScript size, ilerlemeden önce girişleri saklama ve gösterme esnekliği verir ve hemen geri bildirim sağlayabilir. Doğru geçerlilik ile birlikte, çoklu adım formlar sadece temiz, doğru veriler sunucunuza sunulur.

Bu makalede, navigasyon, müşteri odaklı geçerlilik, ilerleme göstergeleri ve en iyi uygulamalar da dahil olmak üzere güçlü bir çok adımlı form nasıl inşa edeceğinizi öğreneceksiniz.

Çok Adımlı Formun Temel Yapısı

Her çoklu adım formu benzer bir desen takip eder:

• AAHRAT:0)form konteyner tüm adımları attırıyor
• [FONT:0) Çok sayıda adım bölümü [DÜDÜDÜDÜDÜDÜDÜŞÜNÜ: 0)
• [FONT=0)Navigasyon düğmeleri[Dönemli: “Sonraki” ve “Önceki” adımlar arasında hareket etmek için adımlar arasında hareket etmek için.
• [FONT=0]Validation mantığı) - Mevcut adımda bu alanların kullanıcının devam etmesine izin vermeden önce geçerli olduğunu kontrol edin.

Ayrıca, kullanıcıların nerede olduklarını ve ne kadar kaldığını göstermek için aritFLT:0)progress göstergesi[DDK:1).

HTML Shell'i inşa edin

Temiz bir HTML yapısıyla başlayın. Her adım bir sınıf ile birFLT:1'dir:2. Sadece ilk adım varsayılan olarak görünür; diğerleri ise [[ŞUFONTD:3 ile gizlenmiştir.

<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>

[FONT=0)İmportant:[Dönetici:[Dönetici: 0)) Arama düğmeleri, kaza formu teslim edilmesini engellemek için kullanılır. Sadece son “Submit” düğmesine sahip olmalıdır.

CSS: Viability ve Styling

InlineurizeFLT:7'e güvenmek yerine, CSS sınıflarını kullanmak daha temiz.

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

Ardından HTML'de, inlineurFLT:9 özelliklerini ortadan kaldır ve sadece ilk adıma ek olarak. JavaScript, sınıfa / adımlara göstermek için sınıf atacaktır.

Ayrıca geçişleri, ilerleme barlarını ve tutarlı spacing ekleyebilirsiniz. Örneğin:

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

Bu, adımları geçerken pürüzsüz bir şekilde silinir.

JavaScript: Navigation ve Validasyon

Şimdi temel mantığı yazacağız: adımlar arasında hareket etmek, her adımın alanlarını uygulamak ve UI'yi güncellemek.

DOM Elements

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

Navigation Fonksiyonlları

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);
}

Adımda Geçerlilik

Mevcut adımda tüm gerekli alanları kontrol eden bir işlev yazın ve hata mesajları gösterir. basitlik için, bu örnekte, ancak bir üretim formu, tarlalara bir sonraki doğru mesajları göstermelidir.

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());
}

Event dinleyicileri aranır

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

[FONT:0)Not:[[Dönetici: 0 3) Bu, her adımın tam bir “Sonraki” ve bir “Önceki” düğmeye sahip olduğunu varsayar.Daha karmaşık formlar için, veri özelliklerini (örneğin, 03.g., [[Döneticileri) belirli adımlara harita düğmeleri haritalamak isteyebilirsiniz.

Gelişmiş Geçerlilik Teknikleri

Temel gerekli alanları kontrolleri temel olsa da, modern formlar kullanıcı deneyimini ve veri kalitesini artıran daha sofistike geçerliliklerden yararlanır.

HTML5 Constraint Validation

Modern tarayıcılar, [[Dörtüncü sınıf için geçerli olan desteğin yerine getirilmesini sağladılar.()))) ..((()))))|Dold|s.

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;
}

Gerçek Zamanlı Inline Validation

Kullanıcılara, tür olarak derhal geri bildirim vermek, Kişisel alanlarda olaylarını dinlemek veya dinlemek. Örneğin:

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');
 }
});

Reg Priex Validation

Telefon numaraları, posta kodları veya şifreler gibi alanlarda, [[Şeff:2|spektifler veya özel bir regex. Örnek for a US telefon numarası (10 basamak):

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

Sonra JavaScript'te, kendi regex ile değerini kontrol edebilirsiniz.

Bir İlerleme Göstergesi Ekleyin

Bir ilerleme barı veya adım sayacı, kullanıcıların kaç adımın kaldığını ve endişeyi azaltmasına yardımcı olur. İşte JavaScript ve CSS kullanarak basit bir uygulama.

HTML Structure for Progress Steps

<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;
}

Güncelleme JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript Update JavaScript

In theFLT:34) işlevi, aynı zamanda ilerleme göstergeleri de güncelliyor:

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;
}

Ayrıca yüzde hesaplayarak lineer bir ilerleme çubuğu da ekleyebilirsiniz: “Ücretsiz: 15.000” ve ayuFLT:37 genişliği ayarlayabilirsiniz.

Edge Cases ve Kullanıcı Deneyimi Detayları

Bir üretime hazır çok adımlı bir form oluşturmak için, bu ek yönleri göz önünde bulundurun:

Klavye Navigation

Kullanıcılar, [FONTD:0)Enter[Dönetici:0) anahtar (daha sonraki “Next” düğmesine basarak) ve geriye doğru “FLT:2)Escape) veya özel bir kısayol. Tüm düğmeleri ve alanların makul olduğunu ve sekme düzeni mantıklı olduğunu emin olmak.

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();
 }
});

Multi Submissions önlemek

Tekrarlanan form gönderimlerinden kaçınmak için ilk tıkladıktan sonra teslim düğmesine basılabilir:

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

Data Temporly

Kullanıcı sayfayı yanlışlıkla yenilerse, tüm verileri kaybederler. Saha değerlerini 444D:40'da depolamak veya wwwFLT:41'ye kullanıcı ilerlemeleri olarak geri dönün. Sayfa yük, değerleri geri yükleyin ve son kaydedilen adıma atlar.

Güvenlik Önergeleri

Müşteri tarafı doğrulama sadece kullanıcı deneyimi içindir; her zaman sunucudaki verileri doğrulayın ve cezalandırın.Use HTTPS ve CSRF tokens for sensitive formlar.

Accessability (A11y) En İyi Uygulamalar

Çok fazla adım formlar, doğru kodlanmamışsa ekran hazır kullanıcılar için zor olabilir.Bu yönergeleri takip edin:

• [FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=FONT=
• Açıklama : 0:0)ARIA canlı bölgeler (e.g., 03: 00) bu yüzden ekran okuyucuları yeni içerik ortaya çıktığını biliyor.
• [FONT: 9|Sessiz) mevcut ilerleme adımına ek olarak.
• Hata mesajlarının giriş alanları ile ilişkili olduğu (örneğin: 14/46)
• Tüm interaktif elementlerin klavyeye erişilebilir olduğundan ve görünür odak göstergeleri olduğundan emin olun.

<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>

Geçerlilik başarısız olduğunda, hata mesajını sağdan çıkarabilirsiniz. ” ve açıklanacaktır.

Tüm Birlikte Getirmek: Tamamlanmış Örnek

Aşağıda, geçerlilik ve ilerleme göstergeleriyle tamamen işlevsel bir çoklu adım biçiminin kontenjalı bir versiyonudur. Bu yapıyı kendi projelerinize adapte edebilirsiniz.

<!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>

Bu örnek HTML5 geçerliliği ([[[DÜT:50) ve yerleşik hata mesajlarını kullanır. Gerekirse özel hata formatı ile [[ENFLT:51) değiştirebilirsiniz.

Ayrıca okuma ve Kaynaklar

Form doğrulama ve erişilebilirlik anlayışını derinleştirmek için, bu kaynakları kontrol edin:

• [FONT:0)MDN: Müşteri-Side Form Geçerlilik).
• [0]WAI Web Accessibility mphs: Multi-Page Forms[DÜT:1).
• [FONT:0)MDN: ARIA Live Bölgeler).
• [0]Directus Blog: Daha İyi Formlar [Döneticiler İçin]

Çıtma Yukarı

JavaScript ile inşa edilen çok yönlü formlar, kullanıcı deneyimini ve verileri doğrulaştırma için güçlü bir araçtır. Her adımda yönetilebilir bölümlere geçerek girişleri onaylayabilirsiniz ve görsel ilerleme sağlar, form terk etmeyi ve daha temiz verileri toplarsınız.

Sağlam bir HTML yapısıyla başlayın, CSS'de görsel geri bildirim için tabaka ve sonra navigasyon ve doğrulama için JavaScript ekleyin. formunuzu gerçek zamanlı geçerlilik, ilerleme göstergeleri ve erişilebilirlik özellikleri herkes için kullanılabilir hale getirmek için.Son olarak, her zaman müşterinin geçerliliğinin bir kolaylık olduğunu unutmayın - asla sunucuya güvenmeyin.

Uygulamanızın ihtiyaçlarını karşılamak için farklı tasarım ve doğrulama teknikleri ile deney. Burada gösterilen teknikler, herhangi bir çok adımlı form projesi için adapte edebileceğiniz ve genişletebileceğiniz bir temel sağlar.