确保HTML表单按特定顺序填写

Ensuring an HTML form is filled out in a specific order?

本文关键字：定顺序 HTML 表单 确保      更新时间：2023-09-26

我有一个表单，它在用户输入数据时实时执行计算。但是，有些计算需要先填写某些字段。

例如，如果我有4个字段，而字段4是字段1的百分比，那么在用户将数据输入字段4之前，我必须确保用户具有字段1的值。

我的一个想法是给每个字段一个带有序列号的数据步属性。当表单第一次出现时，除第一个字段外，所有字段都将被禁用。在第一个字段中输入有效数据后，将启用下一步的字段。这还假设，如果用户随后清空字段1，则其余字段随后被清空并再次被禁用。

我很确定这个解决方案会起作用，但需要大量的JS代码（jQuery）来确保它正常工作，以及服务器端验证。但我有点困惑的一个"问题"是，如果你提交了一个表单，服务器端验证失败，然后你再次呈现表单，如何保持表单字段的禁用/启用状态？但我想我会在目前的问题之后处理这个问题。

所以问题是，对于必须按顺序填写的表格问题，这是一个不错的解决方案吗？有没有其他人找到了比我计划实施的更好的解决方案或更优雅的方法？我对一般概念或想法很满意；我几乎可以编写任何我需要的代码，只是我不确定这个特定问题的最佳实践。

您似乎不需要检查订单，而是需要排除表单填写错误的情况（例如，字段4已填写，字段1未填写）。

我建议您允许用户输入他们想要的任何内容，但只要必填字段为空，就要突出显示，并在所有内容都正确之前阻止表单提交。

您的建议是一个很好的方法。JS代码不会那么庞大。您可以使用字段上的类名来确定哪个是活动字段。您总是可以传回一些JS变量或隐藏字段，告诉页面在服务器端验证后哪个是活动的。

为什么不在客户端验证值？按照你的想法进行处理。将onchange事件处理程序设置为您的输入，并在处理程序中验证该值。如果正确，启用下一个输入；如果不正确，则当前禁用保持不变。只需要几行脚本。

      if(option1 == "" && option2 != "")
      {
           alert("Please fill options in a Sequence");
      }
      else if(option2 == "" && option3 != "")
      {
           alert("Please fill options in a Sequence");
      }
      else if(option3 == "" && option4 != "")
      {
           alert("Please fill options in a Sequence");
      }
      else if(option4 == "" && option5 != "")
      {
           alert("Please fill options in a Sequence");
      }
相关文章：