Error messages showing in upper right corner of screen when I wanted next to the input

Question

I am studying a system that uses jsf and primefaces. I expected that this snipped showed an error close a the input but the error appears as a message in the upper left corner of screen.

<h:form>

    <div class="col-md-4"> 
        <p:outputLabel  value="Rua:"></p:outputLabel>
        <p:inputText id="rua"  value="#{enderecoFace.endereco.rua}"   >
            <p:message for="rua" ></p:message>
            
        <f:validateLength  minimum="3" maximum="3" />

    <h:message  for="rua" style="color:red"></h:message>
        </p:inputText>
        
    </div>

What can be going on?

You have a `p:messages` somewhere on your page probably that is intercepting the validation messages. — Melloware, May 13 '21 at 19:36

Jasper de Vries · Answer 1 · 2021-05-14T08:34:39.657

First change the position of your p:message. It should not be a child of the input component. So do:

<p:outputLabel value="Rua:" />
<p:inputText id="rua" value="#{enderecoFace.endereco.rua}">            
    <f:validateLength minimum="3" maximum="3" />
    <!-- NOT here -->
</p:inputText>
<p:message for="rua" /> <!-- but here instead -->

And make sure the message component is updated by the component that invokes the action (like a p:commandButton).

Error messages showing in upper right corner of screen when I wanted next to the input

1 Answers1