JSF ajax validation versus "normal" validation
I have this little form and am trying to understand the use of ajax in JSF validation. Here is the form. (A bean support is simply a 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 an ajax attached to my button that passes the outputText tag with the first first and last name after submit, which is ok. My question is, why do I need to use a f:ajax
tagged tag f:validateLength
to validate two fields? I understand that ajax does all lifecycle phases up to the render response phase, i.e. it includes validation. Does the validation phase affect the page with posts in any way, whether it comes from an ajax request or a regular post / action request? If I remove the ajax tags attached to the input fields, the validation messages are not displayed, but they are executed if I remove the ajax at all and just use normal submit using the command.utut action event.
Thanks Alan
source to share
This is because in normal request processing only (in any client-side script processing) the entire form is submitted to send values to the server. This happens when you delete all yours <f:ajax>
. There is no way to get a response from the server (in this case your validation messages) just by entering input fields.
When you remove <f:ajax>
from components firstName
and and lastName
and leave this last one with <h:commandButton>
, then it says it will do firstName
and lastName
, do server side validation for those fields, but only the component will be rendered as a result :greeting
. To fix this, you can add the <h:commandButton>
following to yours :
<f:ajax execute="firstName lastName" render=":greeting firstNameMsg lastNameMsg"/>
But now these messages will only be displayed when the form is submitted, not when entering keys into input fields.
To get some summary: using AJAX, you have to specify exactly which components (and all of its children) should be rendered after submitting the request.
By the way, it is not recommended to send a server request for every user-entered input field. Better to use JavaScript or other client-side technologies to do this, and only check the full, final value on the server.
Hope my explanation helps you.
source to share