Error messages per page using <h: messages> in JSF

I am creating a simple JSF example. This is a small login application. My problem is duplicating error messages on my page:

I have two tags h:message(for username and password) and one h:messages(global messages) on my page:

<h:form id="loginForm">

   <h:panelGrid columns="3">

       <h:outputText value="Username" />
       <h:inputText id="username" value="#{loginBean.username}" 
                  required="true" requiredMessage="Please enter your username" />
       <h:message for="username" errorClass="errorMessage" /> <!-- Message for username -->

       <h:outputText value="Password" />
       <h:inputSecret id="password" value="#{loginBean.password}" 
                  required="true" requiredMessage="Please enter your password" />
       <h:message for="password" errorClass="errorMessage" /> <!-- Message for password -->


       <h:commandButton value="Login" action="#{loginBean.login}" />

   </h:panelGrid>

   <h:messages styleClass="errorMessage" /> <!-- Global messages -->


</h:form>

The action method login()in my bean support:

public String login() {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    if ("admin".equals(username) && "pass".equals(password)) {
        return "success";
    } else {
        facesContext.addMessage("loginForm", new FacesMessage("Username or password is incorrect"));
        return null;
    }
}

I want to show a message about an empty username or password only next to these fields , but not under my button in global messages. And I want to print an error message from my action method in global messages if the password or username is incorrect. How can i solve this?

globalOnly:

<h:messages styleClass="errorMessage" globalOnly="true" /> <!-- Global messages -->

, .

!