v2.5.2
Giriş yap

Multi step form İnput type sorgulama

mustafasever
750 defa görüntülendi

Merhaba multi step form yapmak istiyorum ve Burdaki kodları kullanıyorum
ama mesela input type url yada email olsa bile içi herhangi bir metin ile dolu oldugunda direk olarak adımı geçiyor bunu nasıl sorgulata bilirim yani type email olanın içi email olmasi şartını .


var currentTab = 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 = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  fixStepIndicator(n)
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  if (n == 1 && !validateForm()) return false;
  x[currentTab].style.display = "none";
  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 == "") {
      y[i].className += " invalid";
      valid = false;
    }
  }
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid;
}

function fixStepIndicator(n) {
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  x[n].className += " active";
}

Kodların Tamamına ulaşmak için tıklayınız.!

mustafasever
1155 gün önce

Evet required yapsam bile direk olarak form geçiyordu. @qplot
Hocam çok teşekkür ederim kodlar için elinize sağlık. @tayfunerbilen