var currentTab = 0; // 當前標籤頁設為第一個標籤頁 (0)
showTab(currentTab); // 顯示當前標籤頁

function showTab(n) {
  // 這個函式將顯示錶單指定的標籤頁...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ...並固定“上一步”/“下一步”按鈕
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "提交";
  } else {
    document.getElementById("nextBtn").innerHTML = "下一步";
  }
  // ...並執行一個函式來顯示正確的步驟指示器
  fixStepIndicator(n)
}

function nextPrev(n) {
  // 這個函式將決定顯示哪個標籤頁
  var x = document.getElementsByClassName("tab");
  // 如果當前標籤頁中的任何欄位無效，則退出函式
  if (n == 1 && !validateForm()) return false;
  // 隱藏當前標籤頁
  x[currentTab].style.display = "none";
  // 將當前標籤頁增加或減少 1
  currentTab = currentTab + n;
  // 如果您已到達表單的末尾...
  if (currentTab >= x.length) {
    //...則提交表單
    document.getElementById("regForm").submit();
    return false;
  }
  // 否則，顯示正確的標籤頁
  showTab(currentTab);
}

function validateForm() {
  // 此函式負責表單欄位的驗證
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // 迴圈檢查當前標籤頁中的每個輸入欄位
  for (i = 0; i < y.length; i++) {
    // 如果欄位為空...
    if (y[i].value == "") {
      // 為欄位新增“invalid”類
      y[i].className += " invalid";
      // 並將當前有效狀態設定為 false
      valid = false;
    }
  }
  // 如果有效狀態為 true，則將該步驟標記為完成且有效
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // 返回有效狀態
}

function fixStepIndicator(n) {
  // 這個函式將移除所有步驟的“active”類...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //...併為當前步驟新增“active”類
  x[n].className += " active";
}