JavaScript से मल्टी-स्टेप फॉर्म कैसे बनाएं?

JavaScript का उपयोग करके मल्टी-स्टेप फॉर्म (चरणबद्ध फॉर्म) बनाने का पूरा कोड नीचे दिया गया है। यह लंबे फॉर्म्स को छोटे-छोटे चरणों में बांटकर यूजर अनुभव सुधारता है।

उदाहरण

<!DOCTYPE html> 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
  * { box-sizing: border-box; } 
  body { background-color: #f1f1f1; } 
  #regForm { margin: 100px auto; font-family: Raleway; padding: 40px; width: 70%; min-width: 300px; } 
  h1 { text-align: center; } 
  input { padding: 10px; width: 100%; font-size: 17px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: 1px solid #aaaaaa; } 
  input.invalid { background-color: #ffdddd; } 
  .page { display: none; } 
  button { background-color: #4CAF50; color: #ffffff; border: none; padding: 10px 20px; font-size: 17px; font-family: Raleway; cursor: pointer; } 
  button:hover { opacity: 0.8; } 
  #prevBtn { background-color: #bbbbbb; } 
  .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; } 
  .step.active { opacity: 1; } 
  .step.finish { background-color: #4CAF50; } 
</style> 
<body> 
  <form id="regForm"> 
    <h1>रजिस्टर:</h1> 
    <div class="page">
      Name: <p><input placeholder="पहला नाम:" oninput="this.className = ''" name="fname"></p> 
      <p><input placeholder="अंतिम नाम:" oninput="this.className = ''" name="lname"></p> 
    </div> 
    <div class="page">
      संपर्क जानकारी: <p><input placeholder="ईमेल:" oninput="this.className = ''" name="email"></p> 
      <p><input placeholder="फोन:" oninput="this.className = ''" name="phone"></p> 
    </div> 
    <div class="page">
      जन्मदिन: <p><input placeholder="तारीख:" oninput="this.className = ''" name="dd"></p> 
      <p><input placeholder="महीना:" oninput="this.className = ''" name="nn"></p> 
      <p><input placeholder="वर्ष:" oninput="this.className = ''" name="yyyy"></p> 
    </div> 
    <div style="overflow:auto;"> 
      <div style="float:right;"> 
        <button type="button" id="prevBtn" onclick="nextPrev(-1)">पिछला</button> 
        <button type="button" id="nextBtn" onclick="nextPrev(1)">अगला</button> 
      </div> 
    </div> 
    <div style="text-align:center;margin-top:40px;"> 
      <span class="step"></span> 
      <span class="step"></span> 
      <span class="step"></span> 
    </div> 
  </form> 
  <script> 
    var currentTab = 0; 
    showTab(currentTab); 
    function showTab(stepNo) { 
      var pageEle = document.getElementsByClassName("page"); 
      pageEle[stepNo].style.display = "block"; 
      if (stepNo == 0) { document.getElementById("prevBtn").style.display = "none"; } 
      else { document.getElementById("prevBtn").style.display = "inline"; } 
      if (stepNo == (pageEle.length - 1)) { document.getElementById("nextBtn").innerHTML = "सबमिट"; } 
      else { document.getElementById("nextBtn").innerHTML = "अगला"; } 
      changeStepIndicator(stepNo); 
    } 
    function nextPrev(stepNo) { 
      var pageEle = document.getElementsByClassName("page"); 
      if (stepNo == 1 && !checkForm()) return false; 
      pageEle[currentTab].style.display = "none"; 
      currentTab = currentTab + stepNo; 
      if (currentTab >= pageEle.length) { document.getElementById("regForm").submit(); return false; } 
      showTab(currentTab); 
    } 
    function checkForm() { 
      var pageEle, inputEle, i, valid = true; 
      pageEle = document.getElementsByClassName("page"); 
      inputEle = pageEle[currentTab].getElementsByTagName("input"); 
      for (i = 0; i < inputEle.length; i++) { 
        if (inputEle[i].value == "") { inputEle[i].className += " invalid"; valid = false; } 
      } 
      if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; } 
      return valid; 
    } 
    function changeStepIndicator(stepNo) { 
      var i, pageEle = document.getElementsByClassName("step"); 
      for (i = 0; i < pageEle.length; i++) { pageEle[i].className = pageEle[i].className.replace(" active", ""); } 
      pageEle[stepNo].className += " active"; 
    } 
  </script> 
</body> 
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

मुख्य कॉम्पोनेंट्स:

• .page क्लास - प्रत्येक स्टेप का कंटेनर (डिफ़ॉल्ट छिपा हुआ)
• currentTab - वर्तमान स्टेप ट्रैक करता है (0-आधारित)
• showTab() - स्टेप दिखाता/छुपाता है, बटन टेक्स्ट अपडेट करता है
• nextPrev() - नेक्स्ट/प्रीवियस नेविगेशन, वैलिडेशन के बाद
• checkForm() - वर्तमान स्टेप के सभी फील्ड्स वैलिडेट करता है
• स्टेप इंडिकेटर - विजुअल प्रोग्रेस डॉट्स

सुधार के सुझाव:

• फील्ड-लेवल वैलिडेशन - ईमेल फॉर्मेट, फोन नंबर, डेट वैलिडिटी
• डेटा पर्सिस्टेंस - स्टेप्स के बीच डेटा सेव करना (localStorage/state)
• एनीमेशन - स्टेप ट्रांजिशन (फेड, स्लाइड)
• कीबोर्ड सपोर्ट - Enter से नेक्स्ट, Escape से प्रीवियस
• URL सिंक - हैश/क्वेरी पैरामीटर से स्टेप ट्रैक करना
• सबमिशन हैंडलिंग - AJAX सबमिट, लोडिंग स्टेट, सक्सेस/एरर UI

आधुनिक पैटर्न - स्टेट मशीन:

const formSteps = [
  { id: 'personal', fields: ['fname', 'lname'], validate: validatePersonal },
  { id: 'contact', fields: ['email', 'phone'], validate: validateContact },
  { id: 'dob', fields: ['dd', 'mm', 'yyyy'], validate: validateDOB }
];

let currentStep = 0;

function goToStep(step) {
  if (step < 0 || step >= formSteps.length) return;
  if (step > currentStep && !formSteps[currentStep].validate()) return;
  
  document.querySelectorAll('.page').forEach((p, i) => {
    p.style.display = i === step ? 'block' : 'none';
  });
  currentStep = step;
  updateUI();
}

UX टिप्स:

• प्रगति बार दिखाएं (कितने स्टेप्स बाकी)
• पिछला बटन हमेशा काम करे (बिना वैलिडेशन)
• ऑटो-सेव ड्राफ्ट (localStorage)
• मोबाइल पर स्टिकी नेविगेशन