JSF form validation with Bootstrap modal - modal is closing - forms

Question

I have a problem with JSF form validation in bootstrap modal. This is code of it:
<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 "login" 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 "hasło" 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">Zarejestruj się</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>
If I use PrimeFaces p:commandButton, the dialog doesn't close when validation fails, but no message is displayed. On the other hand, if I use normal h:commandButton, the dialog always closes and the whole page is refreshed. After page reload, messages about validation problems are displayed in dialog, but I need to click button to display dialog again.
What I'm tryind to say, is that I need a simple way to prevent dialog from closing when validation error occurs, but also dynamically show validation errors in it. How can I achieve it?

Answer 1

The problem main cause is the reload after submit so you can over come this using f:ajax since it will not reload the page:
<h:commandButton value="Submit" >
<f:ajax render=":formId" listener="#{registerAction.register}"/>
</h:commandButton>
And whenever you want to auto-close the modal due to successful validated submit render a panelGroup on that panelGroup do a js code that closes the modal like following :
<h:panelGroup rendered=#{registerAction.submitSuccess}">
<script>
$(document).ready(function () {
$('#registerModal').modal('hide');
});
</script>
</h:panelGroup>
// registerAction.submitSuccess is a boolean flag express valid registeration.