Remove ui-state-error primefaces on ajax render

Goal

Remove ui-state-error from out input components that were invalid before a form update

Description

We have a page that has two modes: view and edit. When editing, the page shows a hidden section where the data is shown in edit mode. We remove all contents from a required input field and submit the form. Due to the validations being performed, the input is marked as invalid. We cancel the edition, making sure also that all messages in context are removed, thus returning to our view mode. When we go to edit mode again, the error messages are gone but the input field hasn’t lost its ui-state-error class.

How to

As suggested in this blog, a possible solution (the only one I found so far) consists on removing that class, through JQuery, as in:

<p:commandLink action="#{myBean.setEditMode(true)}" update="@form"
  oncomplete="$('.ui-state-error').removeClass('ui-state-error');">
  <h:outputText styleClass="ui-icon ui-icon-pencil" />
</p:commandLink>

The idea is that, on edit panel presentation, all error classes are removed.

Explanations

The behaviour that took me to implement something like this on an application seems a bit awkward to me as I don’t really understand why Primefaces input component were not updated accordingly (notice that, for instance, the messages component was based on primefaces too, and it was removed from the page, as expected!).

Nevertheless, this trick has revealed useful for me and, hopefully, it may be handy to someone else as well.

Once again, all credits should go to the author of this blog.