How to customize Primefaces' Growl's required validation messages

Question

In JSF 2.0 how can I override the required message? I am using Primefaces. Here is my code:

<h:body>
    <p:growl id="growl" showDetail="true"/>
    <h:panelGroup layout="block" styleClass="login-div">
        <h:form id="login">
            <p:panel header="Login">
                <h:panelGrid columns="2">
                    <p:outputLabel for="username" value="Username" />
                    <p:inputText id="username" value="#{authController.username}"
                        autocomplete="off" required="true"
                        requiredMessage="Username is required" />
                    <p:outputLabel for="password" value="Password" />
                    <p:password id="password" value="#{authController.password}"
                        autocomplete="off" required="true"
                        requiredMessage="Password is required" />
                </h:panelGrid>
                <p:commandButton id="submit" value="Login"
                    actionListener="#{authController.login}" update=":growl" />
            </p:panel>          
        </h:form>
    </h:panelGroup>
    <p:ajaxStatus styleClass="ajaxLodingStatus">
        <f:facet name="start">
            <p:graphicImage value="/resources/images/loading.gif" />
        </f:facet>
        <f:facet name="complete">
            <p:outputLabel value="" />
        </f:facet>
    </p:ajaxStatus>
</h:body>

Now the Growl shows: "Username is required" as both of the summary and details FacesMessage. Which is same for the password field.

Now from the actionListener of the command button I am showing when the login attempts failed, in my desired way:

getFacesContext().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN, "Login Error", "Invalid Credential"));

But I want to show "Invalid input" as the summary and "Username is required" as the details.

If I validate these two input fields from the backend and add the FacesMessage as:

if(username == null || username.trim().length() == 0) {
    getFacesContext().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Invalid input", "Username is required."));
}

It is showing what I need. But then there is no need to specify the required="true" attribute in the input component.

But I want to use this required attribute also want to customize the way how the FacesMessage is displayed in the Growl. How can I do this?

---

Update:

Here is my backing bean:

@ManagedBean(name = "authController")
@ViewScoped
public class AuthController extends BaseWebController implements Serializable {

    private static final long serialVersionUID = 2894837128903597901L;

    private String username;
    private String password;

    public AuthController() {
        super();
    }

    public void login(ActionEvent event) {
        getFacesContext().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN, "Login Error", "Invalid Credential"));
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
}

And currently the actionaListener is firing only when there are some inputs. Otherwise, when the fields are blank the Growl is showing:

And after clicking the login button:

As shown in the show-case

What I wants are, when the input username will failed to validate as required the Growl will show:

• Summary: Invalid input.
• Detail: Username is required.

And for the input password:

• Summary: Invalid input.
• Detail: Password is required.

How can I achieve this? Is it possible?

Solution 1

I have found the solution:

I need to customize the validation error messages.

I have created messages.properties file in which I have written:

javax.faces.component.UIInput.REQUIRED=Invalid input.
javax.faces.component.UIInput.REQUIRED_detail={0} is required.

And registered it in faces-config as:

com.edfx.adb.common.properties.messages

And I got this:

Also I have removed the requiredMessage attribute from the input components.

Some useful link:

• Another SO thread.
• JSF 2 messages.properties
• Customize validation error message in JSF 2.0

Solution 2

The requiredMessages are displayed in p:message elements. If you want to show growl messages you've already found your answer.

To see how to use the p:message, see the PrimeFaces showcase

Comments

[Tapas Bose]

Thanks for the reply and the link. But I don't understand how can I achieve what I want. I have updated my question with more information. Please have a look.