Front end validation in step-form

Hi there, I’m building a step form. I already managed to have multiple .tab’s in my <form> element. and it is possible to navigate to the next/prev tab. But validation is working well yet.

I grab per tab all inputs like

function validateForm(){
  var x, y, i;
  x = document.getElementsByClassName("tab");
  y = x[currentIndex].getElementsByTagName("input");
  
  for (i = 0; i < y.length; i++) {
	validateField(y[i]);
  }
  
  if (valid) {
    document.getElementsByClassName("tab")[currentIndex].classList.add("finish");
  }
  return valid; // return the valid status
}

function validateField(input){
  if(isEmptyOrSpaces(input.value) && input.hasAttribute('required')){
      console.log(input.name + ' is required');
	  input.classList.add('invalid');
      valid = false;
      return valid;
  }
  input.classList.remove('invalid');
  valid = true;
  return valid;
}

function isEmptyOrSpaces(str){
    return str === null || str.match(/^ *$/) !== null;
}

This mostly works for normal text inputs. But I’m getting into trouble when using radio’s/checkboxes. When you loop through all inputs per tab, it still sees any checkbox as a seperate input. and it will validate all of them, which always returns something good, because they already have an assigned value. I also tried using the FormData class in JS, but that apparently grabs all inputs from the entire <form> which isn’t good for validation per step.

Does anyone have a solution?

• This topic was modified 2 years, 3 months ago by janmoes.