30 June 2009

Display JSF validation errors in a RichFaces modalPanel

This took some serious research and trial-and-error. It's a non-trivial matter to display JBoss Seam validation errors in a RichFaces modalPanel. Here's the scenario: The user clicks the Submit button on your Seam page, firing off the form validation. Now, based on the existence of errors, you'd like to display a modal window that lists the errors; otherwise, you'd like to continue with the submit button's action.

This article, and its links, helped in coming up with an answer: http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4061517

Here's the Submit button's code:

<a4j:commandButton action="/home.seam" value="Submit"
oncomplete="#{facesContext.maximumSeverity == null ? 'Richfaces.hideModalPanel(\'mpErrors\');' : 'Richfaces.showModalPanel(\'mpErrors\');'}"/>

You render the oncomplete on the server vs. the client. Based on the FacesContext errors, you either show or hide the modalPanel object.

Here's the modalPanel's code:

<rich:modalPanel id="mpErrors" width="350" height="250">
<f:facet name="header">
<h:graphicImage value="/img/msginfo.png" style="float:left; margin-right: 3px;" />
<h:outputText value="System Messages" />
<f:facet name="controls">
<h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelinkmpErrors"/>
<rich:componentControl for="mpErrors" attachTo="hidelinkmpErrors" operation="hide" event="onclick"/>
<a4j:outputPanel ajaxRendered="true" style="width:100%">
<rich:messages passedLabel="Data is allowed to be emailed."
style="width:100%; text-align: left; color: red; font-weight: bold;" rendered="#{facesContext.maximumSeverity == null ? 'false' : 'true'}"
<f:facet name="errorMarker">
<h:graphicImage style="margin-right: 5px;" value="/img/msgerror.png" />
<div style="text-align:center">
<a4j:commandButton style="text-align:center; margin: 29px;" id="btnReturn" value="Return to Form" >
<rich:componentControl for="mpErrors" attachTo="btnReturn" operation="hide" event="onclick"/>

Next: How do you show a "Please wait..." modalPanel while the page's action is sending an email? Still working on that.


mojtaba said...

tank you it was so useful for me

Jens Stahl said...

Very nice and simple solution! Saved me a lot of work, thanks!

Sudda said...

Can you please post the CSS for

Alex C said...

Here you go:


Fabricio Braga said...

Saved my day!

Thank you very much, I will pay you a beer.