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).