JSF ajax validation vs “normal” validation

Question

I have this small form and am trying to understand the use of ajax in JSF validation. Here is the form. (The backing bean is just a simple bean with two variables firstName and lastName.)

<h:form>
    <h:outputLabel for="firstName" value="First Name: " />
    <h:inputText id="firstName" value="#{userBean.firstName}">
        <f:validateLength minimum="5" />
        <f:ajax event="keyup" render="firstNameMsg" />
    </h:inputText>
    <h:message id="firstNameMsg" for="firstName" style="color: red" />
    <br />
    <h:outputLabel for="lastName" value="Last Name: " />
    <h:inputText id="lastName" value="#{userBean.lastName}">
        <f:validateLength minimum="5" />
        <f:ajax event="keyup" render="lastNameMsg" />
    </h:inputText>
    <h:message id="lastNameMsg" for="lastName" style="color: red" />
    <br />
    <h:commandButton value="Submit">
        <f:ajax execute="firstName lastName" render=":greeting" />
    </h:commandButton>
    <br />
</h:form>
<h:outputText id="greeting" value="#{userBean.greeting}" />

I have ajax attached to my button which renders the outputText tag with the first name and last name upon submit which is fine. My question is why do I need to use the f:ajax tag with the f:validateLength tag in order to validate the two fields? My understanding is that ajax performs all the lifecycle phases up to the render response phase i.e. it includes validation. Does the validation phase not re render the page with the messages anyway regardless of whether it comes from an ajax request or a regular submit/action request? If I remove the ajax tags attached to the input fields the validation messages don't show up but they do if I remove ajax altogether and just use a regular submit using the commandButtons action event.

Thanks, Alan

Michał Kupisiński Michał Kupisiński · Accepted Answer · 2013-01-23T11:07:45

This is because in normal request processing the only way (whihout any client side script processing) to submit values to the server is by sending the whole form. This happens when you remove all your <f:ajax>. There's no possibility to get response from server (in this case your validation messages) only by typing in input fields.

When you remove your <f:ajax> from components firstName and lastName and only leave this last one with <h:commandButton> then as it says it will execute firstName and lastName, do server side validation for those fields but as result it will render only :greeting component. To fix it you can add to your <h:commandButton> this:

<f:ajax execute="firstName lastName" render=":greeting firstNameMsg lastNameMsg"/>

But now those messages will show only when you submit your form, not when you type keys in input fields.

To get some summary: using AJAX you have to specify exactly which components (and all it's children) has to be rendered after sending request.

By the way, it's not a good idea to send server request for each key typed by user in input field. Better use JavaScript or other client side technologies to do this and on server only validate whole, final value.

I hope my explanation will help you.

JSF ajax validation vs “normal” validation

1 Answers