Question

在我的应用程序中，我有一个SelecOneMenu，它显示了下面的一些项目..

<h:selectOneMenu id="cmbInput" value="#{myBean.val}" required="true" requiredMessage="Some Message">
            <f:selectItem itemLabel="Please select" noSelectionOption="true" />
            <f:selectItems value="#{myBean.items}" />
            <f:ajax event="valueChange" render="myPanel"/>
            <f:ajax listener="#{myBean.myListener}"/>            
</h:selectOneMenu>

基本上每当用户选择一个项目时，它将呈现一个面板，其下方有一些输入字段，如下面所示。

<h:panelGroup id="myPanel" rendered="#{myBean.someFlag}">
   <h:inputText id="input1" value="#{myBean.someVal}" required="true">
</h:panelGroup>

还有一个“下一步”按钮，将用户带到下一页。

我面临的问题是，每当用户从下拉列表中选择某些内容并在呈现面板之前单击下一个按钮时，就会将他带到下一页。但我想阻止它，因为该面板包含需要输入的字段，所以我想在这种情况下点击下一步时抛出验证错误。

Answer 1

JQuery Validate plugin将是您的最佳选择。

Answer 2

你可以做的很少事情是

显示正在加载...图片，以便用户知道正在发生的事情。
您可以使用jQuery Block Ui Plugin以及Loading ... image。
Javascript验证我怀疑是否会起作用，因为在更新视图之后不会立即显示html元素，并且在此窗口期间用户可以单击下一步，您可以检查是否存在html元素和您的js验证，或者您可以有服务器端验证。

希望这会有所帮助.....

如何在面板完成渲染之前阻止JSF中的表单提交？

2 个答案: