Question

我有一个大型表单，我使用引导标签向用户呈现。在各个选项卡上，都有一个具有required="required"属性的输入字段。

<!-- illustrative code only, with all the excess cruft elided -->
<form onsumbit="return somefunction(this);" method=post action="url">
  <fieldset style="display: none;">
    <!-- the hidden tab -->
    <input required name="princess">
  </fieldset>
  <fieldset>
    <input required name="goomba">
  </fieldset>
  <button type=submit>Save</button>
</field>

如果非当前标签上有空白必填字段，我点击提交按钮，则表单未提交，但浏览器（Chrome v55）也无法提醒用户隐藏标签上的空白必填字段

我在onsubmit="return validateForm(this)"元素上放了一个<form…>处理程序，以为我可以做一些明智的事情......但是这个处理程序没有被调用。在调用onsubmit处理程序之前，浏览器似乎正在检查所有不可见的输入是否有效和窒息。

在控制台中，我看到一条错误消息＆＃34;一个无效的表单控件，名称=＆＃39; princess＆＃39;不可聚焦。＆＃34; princess表单控件位于另一个选项卡（<input type=text name=princess required=required>）上，并且在onsubmit有机会运行之前会触发此错误。

所以..使用<form onsubmit=…>解决这个问题并不是正确的策略。

当用户尝试提交表单并让js优雅地执行必要时，我该怎么做才能运行一些js？

Answer 1

在HTML5中不使用required并让JS进行验证的草稿。它不使用内联onsubmit=...

这是一个不是很好的编程风格的草稿（混合使用jQuery和非jQuery以及用于切换“标签”的黑客）。表单提交取消引自this answer。

Try it on CodePen

您可以将form元素传递给事件处理程序中的validate(form)函数，这样您就可以实现自己的validate()来检查字段是否已填充（必填），并且有效值（如某个范围内的日期/值）。

至少，当用户尝试提交表单并让js优雅地执行必要时，这会“运行一些js”。 ;）

希望这有帮助！

隐藏必填字段时如何截取表格提交？

1 个答案: