On this Page

JSF Form Validation –  using validation attributes

We apply validation rules to make sure that our inputs is are correct.Validation rules are applied at stage 3/Process Validation phase. All registered validators are processed and any errors are added to the FacesContext instance. Processing the moves to the Render Response phase and the same page is displayed again with the error messages displayed.

On our Student Admission application, let’s implement basic validations on the firstanme, last name and date of birth (dob) fields.

We achieve this by adding the required=”true” attribute to the inputText fields.This makes sure that values are submitted in the fields and without them, the form will not be processed and an error message will be displayed to the user.

We also add the requiredMessage=”message” attribute which specifies the error message to be displayed for each specific field when a value is not provided during submission.

Code is as below.

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:h="http://xmlns.jcp.org/jsf/html"

      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"

      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>

        <title>Facelet Title</title>

    </h:head>

    <h:body>

        Student onboarding form

        <h:form prependId="false">

            <ui:fragment rendered="#{not empty facesContext.messageList}">

                 <h:messages  />

            </ui:fragment>

            <br></br>

            <label for="firstname" >First name:</label>

            <h:inputText value="#{admissionController.firstName}" id="firstname"  required="true" requiredMessage="Firstname required"/>

             <br></br>

             <label for="lastname" >Last name:</label>

             <h:inputText value="#{admissionController.lastName}" id="lastname"  required="true" requiredMessage="Lastname required"/>

             <br></br>

             <label for="dob" >Date of birth:</label>

             <h:inputText value="#{admissionController.dateOfBirth}" id="dob"  required="true" requiredMessage="Date of birth required">

                <f:convertDateTime pattern="MM/dd/yyyy" />

             </h:inputText>

             <br></br>

             <h:commandButton action="#{admissionController.processForm()}" value="Submit" ></h:commandButton>

        </h:form>

    </h:body>

</html>

 If we try to submit the form without filling in the fields, processing will not work and we will get the below error screen.

 

 

We can add more validations to the input fields .For instance we will add length validators for the first and last names. The fields will not exceed 20 characters each. For this,we add the attribute maxlength="20".Atribute maxlength is an html attribute and prevents typing more than 20 characters into the fields.

Next we look into custom validators.

About the Author - John Kyalo Mbindyo(Bsc Computer Science) is a Senior Application Developer currently working at NCBA Bank Group,Nairobi- Kenya.He is passionate about making programming tutorials and sharing his knowledge with other software engineers across the globe. You can learn more about him and follow him on  Github.