javascript - 多步表单 Javascript

Question

我正在尝试为我正在做的网站创建一个多步骤表单。该网站是一个汽车车身网站，因此有一个汽车所需服务的复选框。比如换油、轮胎换位、电子检查等等。在“其他”下，我有一个文本输入框，但我不希望它处于事件状态，除非选中“其他”。使用我当前的 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) {

这样它只会选取未禁用的输入字段。