Show error messages of fields in a popup after submit - jsf

Question

I am trying to open a popup using the below code in jsf.
Forgot password
<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>
I am facing some issues here.
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.
I also want to display success messages as well.
Can any one help me how to do that.

Answer 1

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.
You're indeed synchronously submitting the form and performing a full page reload. It's exactly that full page reload which causes an apparent "automatically close" of the dialog (it's actually not closed, it's just exactly like you're pressing F5 in browser directly after opening the dialog). You need to submit the form asynchronously and only perform a partial reload.
You can do that by simply enclosing <f:ajax> in the UICommand component, exactly like shown for <h:commandButton> in the average JSF tutorial (which your <button jsf:action> passthrough element ultimately get converted to).
<button ... jsf:action="#{myBean.resetPassword}">
<f:ajax execute="#form" render="#form" />
</button>
Both execute and render attributes indicate in this particular example that the entire form must be processed, and that only the form itself must be partially updated. As long as the form is inside the modal dialog, and not outside, then this will keep the modal dialog open (at least, in the HTML DOM tree).
I also want to display success messages as well.
Just add a (global) faces message in action method.
public void resetPassword() {
// ...
FacesMessage message = new FacesMessage("Some success message");
FacesContext.getCurrentInstance().addMessage(null, message);
}
<h:messages globalOnly="true" />
A null client ID indicates a global faces message and those will only be shown when globalOnly="true" is set.