多步骤表单Javascript

Question

我正在尝试为我正在做的网站创建一个多步骤表单。 该网站是车身网站，因此有一个复选框，用于提供汽车所需的服务。 例如换油，轮胎旋转，echeck等。 在“其他”下，我有一个文本输入框，但是除非选中“其他”，否则我不希望它处于活动状态。 使用当前的JS，我可以使用它，以便用户在填写完所有字段之前无法继续进行表单的下一步。但是，如果未选中该代码，代码将检测到“其他”文本框，并且不会让我继续继续下一步。 如果有人可以查看我的代码并看到我在做错什么，那将很棒。

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;
    }
  }
  // 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";
}

//check box other
document.getElementById('other').onchange = function() {
 if(this.checked==true){
  document.getElementById("othertext").disabled=false;
  document.getElementById("othertext").focus();
 }
 else{
  document.getElementById("othertext").disabled=true;
 }
};

Answer 1

对我来说，问题似乎在于无论是否禁用，您都在获取所有输入，因此您需要考虑到这一点。 由于您使用的是香草JS，因此可以在validateForm函数中使用该IF条件执行以下操作：

if (y[i].value == "" && y[i].disabled === false) {

这样，它将仅拾取未禁用的输入字段。