Client Side Validation - Custom
A custom client converter or a validator can be implemented easily. Both JSF and Bean Validation APIs are supported.
<script type="text/javascript">
//<![CDATA[
/**
* Faces Validator
*/
PrimeFaces.validator['custom.emailValidator'] = {
pattern: /\S+@\S+/,
validate: function(element, value) {
//use element.data() to access validation metadata, in this case there is none.
if(!this.pattern.test(value)) {
throw {
summary: 'Validation Error',
detail: value + ' is not a valid email.'
}
}
}
};
/**
* Bean validator
*/
PrimeFaces.validator['Email'] = {
pattern: /\S+@\S+/,
MESSAGE_ID: 'org.primefaces.examples.validate.email.message',
validate: function(element, value) {
var vc = PrimeFaces.util.ValidationContext;
if(!this.pattern.test(value)) {
var msgStr = element.data('p-email-msg'),
msg = msgStr ? {summary:msgStr, detail: msgStr} : vc.getMessage(this.MESSAGE_ID);
throw msg;
}
}
};
//]]>
</script>
<h:form>
<p:growl showDetail="true"/>
<p:panel header="Validate">
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="email1" value="Email 1: (JSF Validation)" />
<p:inputText id="email1" value="#{customValidationView.text}">
<f:validator validatorId="custom.emailValidator" />
</p:inputText>
<p:message for="email1" display="tooltip" />
<h:outputText value="#{customValidationView.text}" />
<h:outputLabel for="email2" value="Email 2: (Bean Validation)" />
<p:inputText id="email2" value="#{customValidationView.email}" />
<p:message for="email2" display="tooltip" />
<h:outputText value="#{customValidationView.email}" />
</h:panelGrid>
<p:commandButton value="Save" ajax="false" icon="pi pi-check" validateClient="true"/>
</p:panel>
</h:form>
@Named
@RequestScoped
public class CustomValidationView {
private String text;
@Email(message = "must be a valid email")
private String email;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
public class EmailValidator implements Validator, ClientValidator {
private Pattern pattern;
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,})$";
public EmailValidator() {
pattern = Pattern.compile(EMAIL_PATTERN);
}
public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
if(value == null) {
return;
}
if(!pattern.matcher(value.toString()).matches()) {
throw new ValidatorException(new FacesMessage(FacesMessage.SEVERITY_ERROR, "Validation Error",
value + " is not a valid email;"));
}
}
public Map<String, Object> getMetadata() {
return null;
}
public String getValidatorId() {
return "custom.emailValidator";
}
}
@Target({METHOD,FIELD,ANNOTATION_TYPE})
@Retention(RUNTIME)
@Constraint(validatedBy=EmailConstraintValidator.class)
@ClientConstraint(resolvedBy=EmailClientValidationConstraint.class)
@Documented
public @interface Email {
String message() default "{org.primefaces.examples.primefaces}";
Class<?>[] groups() default {};
Class<? extends Payload>[] payload() default {};
}
public class EmailConstraintValidator implements ConstraintValidator<Email, String>{
private Pattern pattern;
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,})$";
public void initialize(Email a) {
pattern = Pattern.compile(EMAIL_PATTERN);
}
public boolean isValid(String value, ConstraintValidatorContext cvc) {
if(value == null)
return true;
else
return pattern.matcher(value.toString()).matches();
}
}
public class EmailClientValidationConstraint extends AbstractClientValidationConstraint {
public static final String MESSAGE_METADATA = "data-p-email-msg";
public EmailClientValidationConstraint() {
super(null, MESSAGE_METADATA);
}
public String getValidatorId() {
return Email.class.getSimpleName();
}
}
