Time for action – validate e-mail using RemoteCommand
We will now take a look at how to invoke server-side logic from JavaScript code using RemoteCommand. First we will check the e-mail format on client side using JavaScript, and then invoke server-side logic to check if the user provided e-mail already in use or not. Perform the following steps:
- Create a method using following code in the
UserControllermanaged bean to check whether the given e-mail is already in use or not:@ManagedBean @RequestScoped public class UserController { public void checkEmailExists() { String email = this.registrationUser.getEmail(); if("admin@gmail.com".equals(email) || "test@gmail.com".equals(email)) { String msg = "Email ["+email+"] already in use."; FacesContext.getCurrentInstance().addMessage("registrationForm:email", new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, msg)); } } } - On the user registration page, create
validateEmail()JavaScript function for checking e-mail format, and use aremoteCommandcomponent to invoke thecheckEmailExists()actionListenermethod to check whether the given e-mail is already in use or not:<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui"> <h:head> <title>Home</title> <script> function validateEmail() { var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; var email = $.trim($(PrimeFaces.escapeClientId("registrationForm:email")).val()); if(email ==''){ $(PrimeFaces.escapeClientId("registrationForm:emailMsg")).text(""); $(PrimeFaces.escapeClientId("registrationForm:emailMsg")).attr("class", ""); return; } if( emailReg.test( email ) ) { checkDuplicateEmail(); } else { $(PrimeFaces.escapeClientId("registrationForm:emailMsg")).text("Invalid Email"); $(PrimeFaces.escapeClientId("registrationForm:emailMsg")).attr("class", "ui-message-error ui-widget ui-corner-all ui-message-error-detail"); } } </script> </h:head> <body> <h:form id="registrationForm"> <p:panel header="Registration Form" style="width: 800px;"> <h:panelGrid columns="3"> <p:outputLabel value="Email:"/> <p:inputText id="email" value="#{userController.registrationUser.email}" onblur="validateEmail();" /> <p:message id="emailMsg" for="email"/> <p:commandButton action="#{userController.register}" value="Register" update="registrationForm"/> </h:panelGrid> </p:panel> <p:remoteCommand name="checkDuplicateEmail" actionListener="#{userController.checkEmailExists()}" update="emailMsg"/> </h:form> </body> </html>
What just happened?
We have created a validateEmail() JavaScript function to check the e-mail format using Regex and will be called on onblur event on e-mail input element. In the validateEmail() function, if the e-mail format is invalid we are showing the error message as "Invalid email!!", otherwise we are invoking the remoteCommand checkDuplicateEmail as JavaScript function, which invokes the UserController.checkemailExists() method and add error message if the e-mail is already in use.
