验证序列中的表单字段

Question

我有一个以这种方式构建的多步骤订单：

第 1 步：通过单选按钮选择类别

“下一步”按钮只是一个具有 onclick 功能的图像，它使用单选按钮隐藏当前 div，并显示一个新的 div 并显示下一步。

第 2 步：文本区域，复选框 -> 动态价格

包含一个文本区域、一个动态价格和四个复选框。价格根据文本区域中的字符数和复选框中的选择而变化。为了做到这一点，使用了 JQuery 脚本。同样，“下一步”按钮只是一个图像，在激活 onclick 功能后会隐藏当前 div，并在表单中显示包含下一步的 div。

第 3 步：个人数据

这是我的问题。用户在此处插入姓名、电子邮件等。 “下一步”按钮再次只是一个图像，在激活 onclick 功能后隐藏当前 div 并显示包含下一步的 div。我如何使此步骤中的表单字段成为必需的，以允许用户前进到下一步。我用于隐藏和显示 div 的代码如下：

<script type="text/javascript">
    function toggleDiv(id, flagit) {
        if (flagit == "1") {
            if (document.layers) document.layers[''+id+''].visibility = "show"
            else if (document.all) document.all[''+id+''].style.visibility = "visible"
            else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
        }
        else`if (flagit == "0") {
            if (document.layers) document.layers[''+id+''].visibility = "hide"
            else if (document.all) document.all[''+id+''].style.visibility = "hidden"
            else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"`
        }
    }
    //-->
</script>

Answer 1

那是一段可怕的（而且是错误的）旧代码。

这是一个实际上仍然处理 Netscape4（图层部分）的更新

您需要向我展示您切换的脚本的其余部分。您需要将验证添加到 那部分，不是切换。

例如，使用

<form onsubmit="return validate(this)">

和

<input type="image" src="next.png" />

您可以这样做（纯 JavaScript，jQuery 中的显示和隐藏显示在页面的其他位置）：

var currentStep=1;
function toggleDiv(id,flagit) {
  if (document.getElementById) document.getElementById(id).style.visibility = (flagit)?"visible":"hidden";
  else if (document.all) document.all(id).style.visibility = (flagit)?"visible":"hidden";
  else if (document.layers) document.layers[id].visibility = (flagit)?"show":"hide";
}
function validate(theForm) {
  if (currentStep == 1)  {
    if (theForm.category.value....) {
      alert("Error in category");
      return false;
    }
    currentStep++;
    toggleDiv("part1",0);
    toggleDiv("part2",1);
    return false; // do not submit
  }
  if (currentStep == 2)  {
    if (theForm.price.value....) {
      alert("Error in price");
      return false
    }
    currentStep++;
    toggleDiv("part2",0);
    toggleDiv("part3",1);
    return false; // do not submit
  }
  if (currentStep == 3)  {
    if (theForm.name.value....) {
      alert("Error in name");
      return false
    }
    return true; // submit
  }
}

Answer 2

好吧，既然你已经用 jQuery 标记了你的问题，为什么不实际使用它，让 jquery 处理所有特定于平台的问题。

function toggleDiv(id,flagit) {
    if( flagit ) {
       $("#"+id).show();
    } else {
       $("#"+id).hide();
    }
}

让我知道这是否有效。