PrimeFaces input components are not highlighted on validation error - validation

Question

I am using Seam 2.3.1 Final. And I have added the Custom EmailValidation on 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 : jean-michel-75440.exemple42#email-pro.mon-entreprise.com
*/
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 the 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 && !args.validationFailed) PF('personEdit').hide();"
update=":tableForm" ajax="true">
</p:commandButton>
</p:panelGrid>
</h:form>
It works, when I type invalid email, it gives error message text. However, input fields does not switch error-state mode. There is no redline border of input anymore.

Answer 1

You need to explicitly cover the inputs in ajax-update as well. One way is adding #form which represents the current form.
<p:commandButton ... update=":tableForm #form" />
Or by its explicit ID.
<p:commandButton ... update=":tableForm :editPersonelForm" />
Another way is using a PFS/jQuery selector to reference only the inputs.
<p:commandButton ... update=":tableForm #(#editPersonelForm :input)" />
A completely different way is using OmniFaces <o:highlight> to put PrimeFaces own style sheet on the associated inputs (and labels) so that you never need to worry about explicitly ajax-updating them.
<o:highlight styleClass="ui-state-error" />