Question

I am creating a JSF form where I have an email field. I need to validate the email format and check for uniqueness against DB.

I need to check this when the enduser has entered the email field. If it’s present in the DB, then we need to change the field color to red and otherwise to green. I would like to perform this by ajax.

I have seen examples in PHP, but it’s not clear to me how to do it in JSF.

Answer 1

For general email format validation, you could use <f:validateRegex>.

<h:inputText id="email" value="#{bean.email}">
    <f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
</h:inputText>
<h:message for="email" />

To perform validation on blur, add <f:ajax event="blur">.

<h:inputText id="email" value="#{bean.email}">
    <f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
    <f:ajax event="blur" render="m_email" />
</h:inputText>
<h:message id="m_email" for="email" />

For unique email validation, implement the JSF Validator interface according its contract.

@FacesValidator("uniqueEmailValidator")
public class UniqueEmailValidator implements Validator {

    @Override
    public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        if (value == null) {
            return; // Let required="true" handle, if any.
        }

        String email = (String) value;

        if (yourUserService.existEmail(email)) {
            throw new ValidatorException(new FacesMessage(
                FacesMessage.SEVERITY_ERROR, "Email is already in use.", null));
        }
    }

}

and register it by <f:validator>

<h:inputText id="email" value="#{bean.email}">
    <f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
    <f:validator validatorId="uniqueEmailValidator" />
    <f:ajax event="blur" render="m_email" />
</h:inputText>
<h:message id="m_email" for="email" />

To change component’s style, you could use EL in style or styleClass attribute.

<h:inputText id="email" value="#{bean.email}" styleClass="#{component.valid ? (facesContext.postback ? 'ok' : '') : 'error'}">
    <f:validateRegex pattern="([^.@]+)(\.[^.@]+)*@([^.@]+\.)+([^.@]+)" />
    <f:validator validatorId="uniqueEmailValidator" />
    <f:ajax event="blur" render="@this m_email" />
</h:inputText>
<h:message id="m_email" for="email" />

You do not necessarily need jQuery for this. It would also have been less robust as jQuery runs at the client side, not the server side (you know, endusers have 100% control over what runs at the client side).