Nevermind. I had figured it out. Brain fart!

I needed to loop through the select fields just like the input fields.

So create a variable and replicate what was done for the input field by assigning the value of the variable with the current tab and getting the tag name (select) and then writing a for loop to check in each current tab to see if there is a value passing through.

Works like a champ!

I used this solution to make a multi-step form.
https://www.w3schools.com/howto/howto_js_form_steps.asp

The only difference is several of the fields that are required in this form is in a select box and for some reason, I can not get the Validation Handler to fire based on finding the value of the select option values.

I want to check and make sure specified fields in the form does not return an empty string just like the input field in the validateForm() function.

Here is the JS Code. I am using the same “tab” class on each section on my form in the markup. Just the script would need that validation handling.

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("nextBtn").style.display = "inline";
  } else {
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").style.display = "none";
  } 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:
  // 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, q, optCheck, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  q = x[currentTab].getElementById("required-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;
    }
  }

  for(i = 0; q.length; i++){
    optCheck = document.getElementsByTagName('option')[q][i].value;

    if(optCheck.value == ""){
      q[i].className += "invalid";
      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";
}

My head’s kind of in a web. Could anyone help?

Thanks!! 😀