Multi Step Form validation with checkbox, radio, select, textarea

Question

I am creating a multi step form using the instructions here . This Javascript doesn't include checkbox fields and radio button fields so I'm a little fuzzy on how to get that to work in the example linked below. I was able to include the textarea, text inputs, and selects with no problem using the querySelectorAll but it skips over the checkbox and radio buttons when doing the inline validation. All research to get this working is coming up empty. Any Javascript experts willing to teach/show what is missing here?

Here is my JSFiddle

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  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";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].querySelectorAll('textarea, input, select');
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}

Answer 1

By just adding another line of code I was able to achieve the results I was looking for. I updated the above JS Fiddle and changed:

y = x[currentTab].querySelectorAll('textarea, input, select'); 

to

y = x[currentTab].querySelectorAll('textarea, select, input[type=text]');

and added this:

if (x[currentTab].querySelector("input[type=checkbox]")) {
    // Is at least one of them checked?
    if (!x[currentTab].querySelector("input[type=checkbox]:checked")) {
     document.getElementsByClassName("tab")[currentTab].className += " invalid";
      valid = false;
    }
  }

So with a little more CSS I could target the checkbox labels to turn red and pause the form until the recipient checked a box.