Не проверять скрытые поля в javascript

Question

Здравствуйте, я новичок в javascript и все эти html и прочее. У меня есть следующий код от w3schools, который проверяет поля ввода. У меня есть html поля ввода, которые похожи на это.

<div id="employed" style="display:none;">
    <p><input placeholder="Name Of The Organization / Institution ..."  name="organization"></p>
    <p><input placeholder="Designation ..."  name="desig"></p>
    <p><input placeholder="Place Of Work  ..."  name="workplace"></p>
    <p><input placeholder="Communication Address ..."  name="cadd"></p>
    <p><input placeholder="E_mail ID ..."  name="offemail"></p>
    <p><input placeholder="Contact Number ..."  name="contact"></p>
  </div>  

У меня есть javascript, который показывает скрытое поле, когда пользователь выбирает переключатели. Но когда я нажимаю «Далее», он проверяет поля, даже если они скрыты. javascript для проверки:

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // 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;
      (y[i].style.display == "none")?valid = true: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
}

Пожалуйста, я учусь прямо сейчас, и я застрял здесь. Заранее спасибо!

Answer 1

Поскольку входной домен все еще доступен в вашем документе, и он только скрыт. Для предотвращения вашей проверки проверяет скрытый ввод. измени свой код на это.

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // 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 == "" && y[i].parentElement.style.display != 'none') {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      //valid = false;
      (y[i].style.display == "none")?valid = true: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
}