2

我在页面底部有一个联系表单，其中包含必填且经过验证的表单字段。如果验证失败，我怎样才能让滚动位置回到页面底部？

我希望这个页面在禁用 Javascript 的情况下工作，所以没有 AJAX 解决方案。我有这样的事情：

<a id="contact"></a>
<h:form id="cform">
    <h5>Contact!</h5>

    <h:outputLabel for="name">Name: 
        <h:message id="nameMsg"  for="name" />
    </h:outputLabel>

    <h:inputText id="name" value="#{bean.name}" required="true" requiredMessage="Please enter name!" />

    <h:outputLabel for="email">Email: 
        <h:message id="emailMsg" for="email" />
    </h:outputLabel>

    <h:inputText id="email" value="#{bean.email}" required="true" requiredMessage="Email is required!">
        <f:validator validatorId="myValidator" />
    </h:inputText>

    <h:outputLabel for="comment">Comment: 
        <h:message id="commentMsg" for="comment" />
    </h:outputLabel>

    <h:inputTextarea id="comment" value="#{bean.comment}" required="true" requiredMessage="Please enter a comment!"/>

    <h:commandButton action="#{bean.go}" id="send" value="send" />
</h:form>

我考虑过在 bean 端进行验证并手动重定向到适当的锚点，但这似乎违背了开始使用 JSF 的目的。我认为有一种简单的方法可以做到这一点，但我在谷歌搜索解决方案时遇到了麻烦，因为我可能没有正确地措辞这个问题。任何人？

4

3 回答 3

4

您可以<f:event type="postValidate">在验证阶段之后使用侦听器挂钩。您可以FacesContext#isValidationFailed()用来检查验证是否失败。您可以使用Flash#setKeepMessages()让面孔消息在重定向中幸存下来（默认情况下，它们是请求范围的！）。您可以使用ExternalContext#redirect()非操作方法执行重定向。

所以，总结一下，这应该做：

<h:form id="cform">
    ...
    <f:event type="postValidate" listener="#{bean.postValidate}" />
</h:form>

和：

public void postValidate() throws IOException {
    FacesContext context = FacesContext.getCurrentInstance();

    if (context.isValidationFailed()) {
        context.getExternalContext().getFlash().setKeepMessages(true);
        context.getExternalContext().redirect("contact.xhtml#cform");
    }
}
于 2012-09-12T11:01:54.007 回答
1

或者我们可以使用f:ajax onerror=来做一些事情，如果他们是一个错误：

 <p:commandButton **>
  <f:ajax onerror="window.scrollTo(0, 0);" />
 </p:commandButton>
于 2013-11-20T09:44:31.387 回答
0

您不需要明确的锚标记，表单的 id 就可以了。

您可以让 Faces 在表单操作 Url 的末尾呈现 id。

例如。

...您的主页内容在这里....

<form id="contact-form" action="/MyView.jsf#contact-form" method="post">

这将导致浏览器在提交后滚动到表单。

它也显示在 URL 中。

您可能可以实现一个自定义表单渲染器来执行此操作。

于 2013-11-26T14:40:48.260 回答