Question

我在bootstrap模式中遇到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 ，对话框将始终关闭并刷新整个页面。页面重新加载后，有关验证问题的消息会显示在对话框中，但我需要单击按钮再次显示对话框。

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

Answer 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是一个表示有效注册的布尔标志。

使用Bootstrap模式进行JSF表单验证 - 模态正在关闭

1 个答案: