提交后在弹出窗口中显示字段的错误消息
Show error messages of fields in a popup after submit
我正在尝试使用以下 jsf 代码打开一个弹出窗口。
<a href="#" data-toggle="modal" data-backdrop="static" data-target="#forgotPassword">Forgot password</a>
<div class="modal fade" jsf:id="forgotPassword">
<div class="modal-dialog">
<form jsf:id="reset-password-form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Request for new password</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="inputEmail">EmailId</label>
<div class="col-sm-9">
<input type="text" class="form-control" jsf:id="inputEmail"
jsf:value="#{myBean.passwordResetEmail}"
name="inputEmail" />
<h:message for="inputEmail" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary"
jsf:action="#{myBean.resetPassword}">sendPassword</button>
</div>
</div>
</form>
</div>
</div>
我遇到了一些问题。
- 当用户输入错误的电子邮件 ID 时,用户将在同一页面上并显示错误。但是我看到,当输入无效的 emailId 时,弹出窗口会自动关闭。
- 我也想显示成功消息。
任何人都可以帮助我如何做到这一点。
When the user enters wrong email Id, the user shall be on same page and errors shall be shown. But I see, the popup closes automatically when the invalid emailId is entered.
您确实在同步提交表单并执行整页重新加载。正是整个页面重新加载导致明显的 "automatically close" 对话框(它实际上没有关闭,就像您在打开对话框后直接在浏览器中按 F5 一样)。您需要异步提交表单并且只执行部分重新加载。
您可以通过简单地将 <f:ajax>
包含在 UICommand
组件中来做到这一点,就像在普通 JSF 教程中为 <h:commandButton>
显示的那样(您的 <button jsf:action>
passthrough element最终得到转化为).
<button ... jsf:action="#{myBean.resetPassword}">
<f:ajax execute="@form" render="@form" />
</button>
execute
和 render
属性都表明在这个特定示例中必须处理整个表单,并且只有表单本身必须部分更新。只要表单在模态对话框内,而不是在模态对话框外,那么这将使模态对话框保持打开状态(至少,在 HTML DOM 树中)。
I also want to display success messages as well.
只需在操作方法中添加一个(全局)面孔消息。
public void resetPassword() {
// ...
FacesMessage message = new FacesMessage("Some success message");
FacesContext.getCurrentInstance().addMessage(null, message);
}
<h:messages globalOnly="true" />
null
客户端 ID 表示全局面孔消息,这些消息仅在设置 globalOnly="true"
时显示。
我正在尝试使用以下 jsf 代码打开一个弹出窗口。
<a href="#" data-toggle="modal" data-backdrop="static" data-target="#forgotPassword">Forgot password</a>
<div class="modal fade" jsf:id="forgotPassword">
<div class="modal-dialog">
<form jsf:id="reset-password-form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Request for new password</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="inputEmail">EmailId</label>
<div class="col-sm-9">
<input type="text" class="form-control" jsf:id="inputEmail"
jsf:value="#{myBean.passwordResetEmail}"
name="inputEmail" />
<h:message for="inputEmail" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary"
jsf:action="#{myBean.resetPassword}">sendPassword</button>
</div>
</div>
</form>
</div>
</div>
我遇到了一些问题。
- 当用户输入错误的电子邮件 ID 时,用户将在同一页面上并显示错误。但是我看到,当输入无效的 emailId 时,弹出窗口会自动关闭。
- 我也想显示成功消息。
任何人都可以帮助我如何做到这一点。
When the user enters wrong email Id, the user shall be on same page and errors shall be shown. But I see, the popup closes automatically when the invalid emailId is entered.
您确实在同步提交表单并执行整页重新加载。正是整个页面重新加载导致明显的 "automatically close" 对话框(它实际上没有关闭,就像您在打开对话框后直接在浏览器中按 F5 一样)。您需要异步提交表单并且只执行部分重新加载。
您可以通过简单地将 <f:ajax>
包含在 UICommand
组件中来做到这一点,就像在普通 JSF 教程中为 <h:commandButton>
显示的那样(您的 <button jsf:action>
passthrough element最终得到转化为).
<button ... jsf:action="#{myBean.resetPassword}">
<f:ajax execute="@form" render="@form" />
</button>
execute
和 render
属性都表明在这个特定示例中必须处理整个表单,并且只有表单本身必须部分更新。只要表单在模态对话框内,而不是在模态对话框外,那么这将使模态对话框保持打开状态(至少,在 HTML DOM 树中)。
I also want to display success messages as well.
只需在操作方法中添加一个(全局)面孔消息。
public void resetPassword() {
// ...
FacesMessage message = new FacesMessage("Some success message");
FacesContext.getCurrentInstance().addMessage(null, message);
}
<h:messages globalOnly="true" />
null
客户端 ID 表示全局面孔消息,这些消息仅在设置 globalOnly="true"
时显示。