Javascript 当必填字段被隐藏时，如何截取提交表单？

我有一个大表单，我正在使用引导选项卡向用户演示。在各种选项卡上都有具有

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）”处理程序，认为我可以在那里做一些合理的事情……但是没有调用该处理程序。在调用
onsubmit
处理程序之前，浏览器似乎正在检查所有不可见输入的有效性和阻塞

在控制台中，我看到一条错误消息“名为class='princess'的无效表单控件不可聚焦。”该
princess
表单控件位于另一个选项卡上（
），此错误在onsubmit运行之前触发

所以。。使用
解决这个问题不是正确的策略

当用户试图提交表单并让js优雅地执行必要的操作时，我可以做些什么来运行一些js？
在HTML5中不使用
required
，并让js进行验证的粗略草案。它不使用内联的
onsubmit=…

这不是一种很好的编程风格（jQuery和非jQuery的混合，以及切换“选项卡”的技巧）。从中引用的表单提交取消


您可以将
form
元素传递给事件处理程序中的
validate（form）
函数，因此您可以实现自己的
validate（）
来检查字段是否用有效值（如范围内的日期/值）填充（必需）

至少，这确实“当用户试图提交表单时运行一些js，并让该js优雅地执行必要的操作”。）

希望这有帮助
 如何使用像这样的库而不使用
required
HTML5属性？或者您可以从隐藏的输入字段中删除
required
，然后让
onsubmit
完成其余的操作？如果第一个选项卡上有必填字段，则视图设置为第二个选项卡时仍然需要该字段。对于有条件的必填字段，如果不是必需的话，我会隐藏，并且我还设置了disabled=disabled属性，该属性会对该字段进行required=required的模拟。到目前为止，我已经发现在浏览器验证后会触发该字段（因此，如果由于不可聚焦的无效输入而出现错误，则无法触发）…但是在浏览器验证发生之前执行，因此我可以将代码放在那里。