Doing more with h:messages/

Question

I want to do more with my <h:messages/> I need some help because i'm not comming up with anything real creative here..
Here is the example;
<h:messages layout="table"/> 
<h:form id="register">
                    <div id="wrapper" class="clearfix" >
                        <div id="maincol" >
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Username"/>
                                <h:inputText required="true" id="username" value="#{regHandler.username}"/>
                                <h:outputLabel value="Password"/>
                                <h:inputSecret required="true" id="password" value="#{regHandler.password}"/>
                                <h:outputLabel value="Confirm Password"/>
                                <h:inputSecret required="true" id="confPassword" value="#{regHandler.confirmPassword}"/>
                                <h:outputLabel value="First Name"/>
                                <h:inputText required="true" id="first" value="#{regHandler.firstName}"/>
                                <h:outputLabel value="Last Name"/>
                                <h:inputText required="true" id="last" value="#{regHandler.lastName}"/>
                                <h:outputLabel value="E-mail"/>
                                <h:inputText required="true" id="email" value="#{regHandler.email}"/>
                                <h:graphicImage value="WeakAuth"/>
                                <h:inputText required="true" id="captcha" value="#{regHandler.weakAuthinator}"/>
                            </h:panelGrid>
                            <h:commandButton value="Register" action="#{regHandler.doRegister}"/>
                        </div>
                    </div>
                </h:form>Now here is the problem, If I submit this form with out filling out any of the inputs I will get a nice table of
Validation Error: Value is required.
Validation Error: Value is required.
Validation Error: Value is required.
Validation Error: Value is required.
Validation Error: Value is required.
Validation Error: Value is required.
Validation Error: Value is required.In addition to these errors I would also like to highlight the input(s) that failed validation. Does anyone know how I can approach this?
Thanks in advance,
t

Answer 1

It works rather well.
I opted to use the form of an inline custom validators. Here is the important code in case anyone else ever needs it. I could have just as easy made a custom validator class and used the non-inline form of validation, but I opted for this methodology because it was the easiest to implement. (Yeah I know lazy)
For inline custom validators:
Register your custom validator bean in your faces-config.xml
  <managed-bean>
    <managed-bean-name>validator</managed-bean-name>
    <managed-bean-class>com.serviceposter.handlers.ValidatorHandler</managed-bean-class>
    <managed-bean-scope>session</managed-bean-scope>
  </managed-bean>Next create your validation method:
public void validateEmail(FacesContext context,
                          UIComponent toValidate,
                          Object value) {
    String email = (String) value;
    if (email.indexOf('@') == -1) {
       ((UIInput)toValidate).setValid(false);
        toValidate.getAttributes().put("styleClass","errorStyle");
        FacesMessage message = new FacesMessage("Invalid Email address");
        context.addMessage(toValidate.getClientId(context), message);
}Now bind your new method to the input:
<h:inputText required="true" validator="#{validator.validateEmail}" id="email" value="#{regHandler.email}"/>Finally create a css style to reflect the highlighting you want to use on the erroring component.
input.errorStyle {
    background-color: red;
}