PrimeFaces input elements do not highlight when validation fails

Question

I am using Seam 2.3.1 Final. And I added Custom MailValidation to my form.

@Name("emailValidator") @BypassInterceptors @org.jboss.seam.annotations.faces.Validator public class EmailValidator implements Validator { private static final String EMAIL_REGEX = "^[_A-Za-z0-9-]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9-]+)*(\\.[A-Za-z]{2,})$"; /** * <a href="http://www.mkyong.com/regular-expressions/how-to-validate-email * -address-with-regular-expression/">Source</a> <br/> * Modification : autorisation des "-" dans le nom de domaine <br/> * Exemple valide : [e-mail] */ public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { /* Create the correct mask */ Pattern mask = Pattern.compile(EMAIL_REGEX); /* Get the string value of the current field */ String emailField = (String) value; /* Check to see if the value is a valid email */ Matcher matcher = mask.matcher(emailField); if (!matcher.matches()) { FacesMessage message = new FacesMessage(); message.setDetail("E-posta adresi geçerli değil!"); message.setSummary("E-posta Hatasi"); message.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ValidatorException(message); } } public String getValidatorId() { return "emailValidator"; } } 

And jsf

  <h:form id="editPersonelForm"> <p:messages showDetail="true" autoUpdate="true" closable="true"/> <p:outputLabel for="personName" value="Ad"/> <p:inputText id="personName" placeholder="Ad" value="#{personelBean.personel.name}" required="true" requiredMessage="Ad alanını doldurmak zorunludur." validatorMessage="Ad alanı zorunludur."> <p:outputLabel for="personEmail" value="E-Posta"/> <p:inputText id="personEmail" value="#{personelBean.personel.email}" placeholder="E-Posta" > <f:validator validatorId="emailValidator" /> </p:inputText> <p:outputLabel for="personelSaveBtn" value=""/> <p:commandButton id="personelSaveBtn" value="Kaydet" action="#{personelBean.saveOrPersist}" oncomplete="if (args &amp;&amp; !args.validationFailed) PF('personEdit').hide();" update=":tableForm" ajax="true"> </p:commandButton> </p:panelGrid> </h:form> 

It works, when I print an invalid email address, it gives the error message text. However, the input fields do not switch the error state mode. There is no more red input border.

Answer 1

You must also explicitly make tabs in ajax-update. One way is to add @form , which represents the current form.

 <p:commandButton ... update=":tableForm @form" /> 

Or its explicit identifier.

 <p:commandButton ... update=":tableForm :editPersonelForm" /> 

Another way is to use the PFS / jQuery selector to refer only to inputs.

 <p:commandButton ... update=":tableForm @(#editPersonelForm :input)" /> 

A completely different way is to use OmniFaces <o:highlight> to place your PrimeFaces own stylesheet on the corresponding inputs (and labels) so you never need to worry about explicitly ajax updating them.

 <o:highlight styleClass="ui-state-error" />