使用 Bootstrap 模态验证 JSF 表单 - 模态正在关闭答案

【问题标题】：JSF form validation with Bootstrap modal - modal is closing使用 Bootstrap 模态验证 JSF 表单 - 模态正在关闭
【发布时间】：2016-04-14 08:48:43
【问题描述】：

我在引导模式中遇到 JSF 表单验证问题。这是它的代码：

<div id="loginmodal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h1 class="text-center">Logowanie</h1>
                        </div>
                        <div class="modal-body">
                            <h:form id="loginForm" class="form col-md-12 center-block">
                                <div class="form-group">
                                    <h:inputText id="login" class="form-control input-lg" a:placeholder="Login" value="#{loginHelper.login}"  required="true" requiredMessage="Pole &quot;login&quot; jest wymagane.">
                                        <f:ajax event="blur" render="loginMessage"/>
                                    </h:inputText>
                                    <h:message id="loginMessage" for="login" style="color: red;"/>
                                </div>
                                <div class="form-group">
                                    <h:inputSecret id="haslo" class="form-control input-lg" a:placeholder="Hasło" value="#{loginHelper.haslo}" required="true" requiredMessage="Pole &quot;hasło&quot; jest wymagane.">
                                        <f:ajax event="blur" render="hasloMessage"/>
                                    </h:inputSecret>
                                    <h:message id="hasloMessage" for="haslo" style="color: red;"/>          
                                </div>
                                <div class="form-group">
                                    <p:commandButton class="btn btn-primary btn-lg btn-block" type="submit" value="Zaloguj" action="#{loginHelper.validate}" id="zaloguj"/>
                                    <h:message for="zaloguj" style="color: red;"/>
                                    <span class="pull-right"><a href="#" data-toggle="modal" data-target="#registermodal">Zarejestruj się</a></span>
                                </div>
                            </h:form>
                        </div>
                        <div class="modal-footer">
                            <div class="col-md-12">
                                <button class="btn" data-dismiss="modal" aria-hidden="true">Anuluj</button>
                            </div>  
                        </div>
                    </div>
                </div>
            </div>

如果我使用 PrimeFaces p:commandButton，验证失败时对话框不会关闭，但不会显示任何消息。另一方面，如果我使用普通的h:commandButton，对话框总是关闭并且整个页面被刷新。页面重新加载后，对话框中显示有关验证问题的消息，但我需要单击按钮再次显示对话框。

我想说的是，我需要一种简单的方法来防止在发生验证错误时关闭对话框，同时在其中动态显示验证错误。我怎样才能实现它？

【问题讨论】：

标签： forms twitter-bootstrap validation jsf modal-dialog

【解决方案1】：

问题的主要原因是提交后重新加载，所以你可以使用f:ajax 来解决这个问题，因为它不会重新加载页面：

  <h:commandButton value="Submit" >
    <f:ajax  render=":formId" listener="#{registerAction.register}"/>
   </h:commandButton>

并且每当您想要自动关闭模式时，由于成功验证提交，请在该 panelGroup 上渲染一个 panelGroup，执行一个 js 代码来关闭模式，如下所示：

   <h:panelGroup rendered=#{registerAction.submitSuccess}">
           <script>
               $(document).ready(function () {
                 $('#registerModal').modal('hide');
               });
           </script>
    </h:panelGroup>

//registerAction.submitSuccess是一个布尔标志，表示有效注册。

【讨论】：