提交后在弹出窗口中显示字段的错误消息

Question

我正在尝试在 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>

我在这里面临一些问题。

1. 当用户输入错误的电子邮件 ID 时，用户将在同一页面上并显示错误。但是我看到，当输入无效的 emailId 时，弹出窗口会自动关闭。
2. 我也想显示成功消息。

任何人都可以帮助我如何做到这一点。

Answer 1

当用户输入错误的电子邮件 ID 时，用户将在同一页面上并显示错误。但是我看到，当输入无效的 emailId 时，弹出窗口会自动关闭。

您确实在同步提交表单并执行整页重新加载。正是整个页面重新加载导致对话框明显“自动关闭”（实际上并没有关闭，就像您在打开对话框后直接在浏览器中按 F5 一样）。您需要异步提交表单并且只执行部分重新加载。

您可以通过简单地将组件包含<f:ajax>在UICommand组件中来实现这一点，这<h:commandButton>与普通 JSF 教程中显示的完全一样（您的<button jsf:action> passthrough 元素最终会转换为该教程）。

<button ... jsf:action="#{myBean.resetPassword}">
    <f:ajax execute="@form" render="@form" />
</button>

都execute和render在该特定示例中的属性指示整个表格必须被处理，且只有形式本身必须被部分地更新。只要表单在模态对话框内部，而不是在外部，那么这将使模态对话框保持打开状态（至少，在 HTML DOM 树中）。

我也想显示成功消息。

只需在 action 方法中添加一个（全局）faces 消息。

public void resetPassword() {
    // ...

    FacesMessage message = new FacesMessage("Some success message");
    FacesContext.getCurrentInstance().addMessage(null, message);
}

<h:messages globalOnly="true" />

甲null客户ID表示一个全局面消息，并且当这些将仅示出globalOnly="true"被设置。