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">
     * Faces Validator
    PrimeFaces.validator['custom.emailValidator'] = {
        pattern: /\S+@\S+/,
        validate: function(element, value) {
            //use 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: '',
        validate: function(element, value) {
            var vc = PrimeFaces.util.ValidationContext;
            if(!this.pattern.test(value)) {
                var msgStr ='p-email-msg'),
                msg = msgStr ? {summary:msgStr, detail: msgStr} : vc.getMessage(this.MESSAGE_ID);
                throw msg;

    <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:message for="email1" display="tooltip" />
            <h:outputText value="#{customValidationView.text}" />

            <h:outputLabel for="email2" value="Email 2: (Bean Validation)" />
            <p:inputText id="email2" value="#{}" />
            <p:message for="email2" display="tooltip" />
            <h:outputText value="#{}" />

        <p:commandButton value="Save" ajax="false" icon="pi pi-check" validateClient="true"/>


Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega


Create awesome applications in no time using the premium templates and impress your users.