Time for action – validating the user registration form

We can use JSF validations for performing the earlier mentioned validations on the registration form. We can also perform validations using PrimeFaces AJAX-based validations by hooking up with JavaScript events, for this perform the following steps:

  1. Update registrationWithVal.xhtml to build a user registration form along with validation support using the following code: 
    <!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>Registration</title>
</h:head>
<body> 
  <h:form id="registrationForm">
    <p:panel header="Registration Form" style="width: 800px;">
    <p:messages />
    <h:panelGrid columns="3">
      <p:outputLabel value="UserName:*"/>
      <p:inputText id="userName" value="#{userController.registrationUser.userName}"
          required="true" label="UserName" >
        <p:ajax event="keyup"  update="userNameMsg"/>
      </p:inputText>
      <p:message id="userNameMsg" for="userName"/>
      
      <p:outputLabel value="Password:*"/>
      <p:password id="password" value="#{userController.registrationUser.password}"
            required="true" label="Password">
        <f:validateLength minimum="4"/>
        <p:ajax update="passwordMsg" event="keyup"/>
      </p:password>
      <p:message id="passwordMsg" for="password"/>
      
      <p:outputLabel value="FirstName:*"/>
      <p:inputText id="firstName" value="#{userController.registrationUser.firstName}"
             required="true" label="FirstName">
      
      </p:inputText>
      <p:message id="firstNameMsg" for="firstName"/>
      
      <p:outputLabel value="LastName:"/>
      <p:inputText id="lastName" value="#{userController.registrationUser.lastName}"/>
      <p:message id="lastNameMsg" for="lastName"/>
      
      <p:outputLabel value="Email:"/>
      <p:inputText id="email" value="#{userController.registrationUser.email}"/>
      <p:message id="emailMsg" for="email"/>
      
      <p:outputLabel value=""/>
      <p:commandButton action="#{userController.register}" value="Register" update="registrationForm"/>
      <p:outputLabel value=""/>
      
        
    </h:panelGrid>
    </p:panel>
  </h:form>
</body>
</html>
  2. Run the application and point your browser to http://localhost:8080/chapter1/registrationWithVal.jsf. Leave UserName and FirstName blank and enter password with less than four characters and submit the form. Then Registration Form will be redisplayed with errors as shown in the following screenshot:
    Time for action – validating the user registration form

What just happened?

We have used input validations such as required, minimum length, and so on. We have used PrimeFaces AJAX-based validations using <p:ajax> on the keyup JavaScript event. So as you type in the password, it will get validated and update the validation message immediately. You can also use <p:ajax> with other JavaScript events such as keydown, keypress, mouseover, and so on.

Tip

Beware of registering AJAX event listeners for JavaScript events such as keyup, keydown, and so on; as it may increase processing overhead and degrade performance. So use this feature cautiously.

本周热推：
PowerShell实战Linux系统最佳实践工具：命令行技术FreeRTOS实时内核应用指南Red Hat Enterprise Linux 6.0系统管理Android系统移植和驱动开发
上一章目录下一章