在使用 ajax 提交表单之前触发 HTML5 约束验证答案

【问题标题】：Trigger HTML5 constraint validation before submitting a form using ajax在使用 ajax 提交表单之前触发 HTML5 约束验证
【发布时间】：2013-08-30 19:42:02
【问题描述】：

我有以下代码 sn-p 并且未触发标准客户端 html 验证。如何触发标准验证并在有效时调用该操作。

<h:form>
<h:inputText type="text" value="#{myBean.value}">
<f:passThroughAttribute name="required" value="required" />
</h:inputText>
<h:commandButton value="submit" type="submit" action="#{myBean.save}">
<f:ajax execute="@form" render="@form" />
</h:commandButton>
</h:from>

如果没有 ajax，将触发客户端验证，如果输入为空，则不会发送表单。

如何使用 ajax 实现这一点？

【问题讨论】：

我没有看到任何客户端验证。添加 Ajax 功能可能会覆盖客户端验证，具体取决于您的操作方式。向我们展示代码！
@noone：是时候深入研究 HTML5：wufoo.com/html5/attributes/09-required.html 和 diveintohtml5.info/forms.html 未来，在基于不确定性发布 cmets 之前，最好尝试根据目前提供的信息重新创建 OP 的问题。
@BalusC 感谢您的链接。我应该更多地考虑f:passThroughAttribute，这对我来说似乎很奇怪。 :)

标签： ajax html validation jsf jsf-2

【解决方案1】：

JSF ajax 引擎在处理请求之前不会检查 HTML5 的 form.checkValidity()。本质上，您需要在命令按钮的onclick 属性中自己完成这项工作。如果它返回false，那么它将阻塞ajax动作。

请注意，您永远不应依赖仅客户端验证，因为这完全可以由最终用户控制。我强烈建议也添加服务器端验证。添加 ajax 后，您可以轻松使用服务器端验证，并获得与客户端验证相同的用户体验。

另见：

JSF2 Validation Clientside or Serverside?

【讨论】：

如果我使用启用部分提交的 commandButton 并仅更新特定表单，页面仍然会在验证后提交。有没有办法避免提交页面？
我认为它与主题有关。发布了一个新问题，如果你能看一下，将不胜感激：stackoverflow.com/questions/33520616/…