Change css chips on validation error - css

Question

I am working with primefaces and using the element "chips" to introduce multiple e-mails, i validate the format of them and im trying to change the style of the "bubbles" to ui-state-error if the validation is wrong
My chips:
<div class="ui-grid-col-1" style="margin-right: 5px;">
<p:chips id="chips" required="true" value="#{Contactos.lista_email}"
placeholder="Email" style="color: red;"
requiredMessage="ERROR: El campo 'Email' es obligatorio"
validator="ValidMail"/>
</div>
My validator:
#FacesValidator(value = "ValidMail")
public class validatorMail implements Validator{
private Pattern pattern;
private Matcher matcher;
private static final String EMAIL_PATTERN =
"^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#"
+ "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";
#Override
public void validate(FacesContext context, UIComponent component,
Object value) throws ValidatorException {
ArrayList<String> aux = (ArrayList<String>) value;
String error = null;
final String EMAIL_PATTERN =
"^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*#"
+ "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";
//Check if user has typed only blank spaces
if(value.toString().trim().isEmpty()){
FacesMessage msg = new FacesMessage("ERROR: Email requiere un formato válido", "Email: requiere un formato válido");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(msg);
}
else {
pattern = Pattern.compile(EMAIL_PATTERN);
for (String temp : aux){
boolean valid = this.validate(temp);
if (valid == false){
if (error == null) error = temp;
else error = error + "\n" + temp;
}
}
if (error != null){
chips.setValid(false);
FacesMessage msg = new FacesMessage("ERROR DE FORMATO: "+"\n" + error, " ");
msg.setSeverity(FacesMessage.SEVERITY_ERROR);
chips.setValid(false);
throw new ValidatorException(msg);
}
}
}
Thanks all

Answer 1

There is currently no way to set seperate chip-elements invalid. The primefaces component org.primefaces.component.chips.Chips doesn't provide means for that in version 6.1. You could of course open a feature request on github.
The only way for now is to set the whole component invalid and provide an appropriate text inside your FacesMessage
((UIInput) component).setValid(false);