特定元素上的reportValidity或表单字段子集上的checkValidity

问题描述 投票:0回答:1

我认为目前这可能是一个无法解决的问题,但我想我还是会问。

我们有一个form,其中包含一个选项卡式界面,该界面实际上是每个选项卡中的字段集。我们希望分别验证每个选项卡,但是该表格包围了所有选项卡。因此,当我们使用reportValidity()submit.click()触发器触发HTML5验证时,会导致浏览器尝试着眼于不可见的字段(在隐藏选项卡上),因为它会查看整个表单。

具有name =''的无效表单控件不可聚焦-Chrome(IE无法聚焦不可见字段,但不会引发错误)

我已经尝试了许多替代方法,但是没有什么能够与可怕的IE11一起使用的。

我能够通过创建一个临时form并使用[form]属性(即<input form="tempForm">)将无效输入指向该函数,从而创建了一个“ reportValidityOnElement”函数,因此我可以仅在该字段上强行报告验证,但是[form]属性在IE中不起作用。

我尝试将无效输入包含在临时form中,添加了一个提交按钮,并触发了对它的单击,但是一旦我替换了临时表单节点并提交按钮,就会导致验证消息工具提示隐藏在其中IE。

我尚未尝试的最后一个想法是重构整个过程,因此每个选项卡周围都有单独的表单,然后当我单击“全局”提交按钮然后合并所有序列化的序列时,分别验证所有选项卡表单数据一起发送给API而不是使用formaction,但是对于某些有用的事情似乎很费力……input.reportValidity()方法(使用IE polyfill)。

[我找到的所有替代方法只会验证整个表单,而不验证子集,除了jQuery的验证插件,而是使用内联标记而不是浏览器的本机验证消息工具提示来报告错误。

HTML5表单是否可以针对一个输入报告reportValidity,类似于您如何针对一个输入检查checkValidity?

在IE中进行提交单击hack到reportValidity时,还有其他方法可以暂时忽略隐藏/不可见字段吗,所以我可以确保它尝试着眼于可见字段?

我认为目前这可能是一个无法解决的问题,但我想我还是会问。我们有一个包含一个选项卡式界面的表单,该界面本质上是每个选项卡中的字段集。我们要...

javascript html5-validation checkvalidity reportvalidity
1个回答
0
投票

我想我可能已经为IE问题提出了另一种解决方案。我暂时禁用了除我正在尝试报告reportValidity的字段之外的所有已启用字段,然后执行submit click()hack触发表单在唯一已启用字段(我想在reportValidity上打开的字段)上使用reportValidity,然后重新启用我暂时禁用的所有那些字段,以使它们恢复到原来的状态。

© www.soinside.com 2019 - 2024. All rights reserved.