Highlight an inputText in JSF when a validation error occurs

Question

I have a form with a lot of inputText, what I want is to highlight those who are not being filled with correct data.

I tried to use 'component.valid' but it always return that the field is invalid (i.e. fields are always red).

this is the code :

<h:inputText value="#{creerPersonne1.nom}" id="nom" 
    style="#{not nom.valid ? 'border-color:red;' : 'border-color:black;'}">
    <f:validateRegex pattern="^[a-zA-Z]+$"></f:validateRegex>
</h:inputText>

this is the result :

note that the field is also highlighted when the page is loaded for the first time.

Answer 1

You should use component.valid instead of nom.valid.

component is an implicit EL object for the current input component. And component.valid calls the isValid() method of the server side component. The id argument cannot be used this way.

So you should change your code as follows:

style="#{ component.valid ? 'border-color:black;' : 'border-color:red;'}"

(Not related but you should better use style classes instead of hard coded styles. The valid check works for the styleClass attribute as well).