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:
- Update
registrationWithVal.xhtmlto 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> - Run the application and point your browser to
http://localhost:8080/chapter1/registrationWithVal.jsf. LeaveUserNameandFirstNameblank and enterpasswordwith less than four characters and submit the form. Then Registration Form will be redisplayed with errors as shown in the following screenshot:
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.
