Time for action – client-side e-mail validation

In our Registration Form, we can do some basic e-mail format validation on client side itself thereby reducing the server roundtrip. We can create a JavaScript function to validate e-mail using Regex, and then hook it up with the onchange event on e-mail input field. Perform the following steps for the same:

1. Write a JavaScript function to validate e-mail address:

   function validateEmail()
   {
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
     var email = $.trim($("#userForm\\:email").val());
     if(email ==''){
       $("#userForm\\:emailMsg").text("");
       $("#userForm\\:emailMsg").attr("class", "");
       return;
     }
     if( emailReg.test( email ) ) {
       $("#userForm\\:emailMsg").text("Valid Email");    
       $("#userForm\\:emailMsg").attr("class", "ui-messages-info ui-widget ui-corner-all ui-messages-info-summary");       
     } else {
       $("#userForm\\:emailMsg").text("Invalid Email");
       $("#userForm\\:emailMsg").attr("class", "ui-message-error ui-widget ui-corner-all ui-message-error-detail");
      }
   }

2. Add the validateEmail() function as an event handler for the onchange event on the e-mail input field:

   <h:form id="userForm">
       <p:outputLabel value="Email:"/>
     <p:inputText id="email" value="#{userController.user.email}" onchange="validateEmail();" />
     <p:message id="emailMsg" for="email"/>    
   
   </h:form>

What just happened?

We have created a JavaScript function to validate e-mail using Regex. Using the jQuery API we have added an info/error message notifying us whether the e-mail is valid or invalid. We have hooked up this function to the onchange event of the e-mail inputText element. So validateEmail() gets invoked as soon as the e-mail value is changed and shows the message.

We got the e-mail field using $("#userForm\\:email"), where userForm is the ID of the form and email is the ID of the e-mail inputText field. JSF generates the IDs with colon (:) separator, but jQuery has a special meaning for colon .So we have replaced the colon (:) with \\:

Instead of replacing the colon by yourself, you can use the PrimeFaces.escapeClientId() utility function as follows:

function validateEmail() 
{
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  var email = $.trim($(PrimeFaces.escapeClientId("userForm:email")).val());
  if(email ==''){
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).text("");
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "");
    return;
  }
  if( emailReg.test( email ) ) {
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).text("Valid Email");    
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "ui-messages-info ui-widget ui-corner-all ui-messages-info-summary");       
  } else {
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).text("Invalid Email");
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "ui-message-error ui-widget ui-corner-all ui-message-error-detail");
   }
}

Tip

Since JSF2.x, we can also change the JSF ID separator character using the following <context-param> configuration in web.xml:

<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

The preceding client-side validation process involves performing manual validations using JavaScript/jQuery. PrimeFaces-4.0 introduced the Client Side Validation (CSV) framework with more powerful features, which we will discuss in Chapter 4, Introducing the PrimeFaces Client Side Validation Framework.