How do you trigger validation on an input component when the component loses focus using ajax instead of waiting for the form to be manually submitted?
Put a <f:ajax event="blur"> in the UIInput component which re-renders a <h:message> associated with the component in question.
<h:inputText id="foo" value="#{bean.foo}" required="true">
<f:ajax event="blur" render="fooMessage" />
</h:inputText>
<h:message id="fooMessage" />
See also JSF 2.0 tutorial with Eclipse and Tomcat - the view and finetuning validation
Try this code:
<h:inputText value="#{bean.value}" valueChangeListener="#{bean.validateValue}">
<f:ajax event="blur" render="valueError"/>
</h:inputText>
<h:outputText id="valueError" value="#{bean.valueErrorMessage}" style="color: red;" />
If the user changes the value in your input component you can validate it with your valueChangeListener. If the user then moves to another input component the ouputText component will be rendered. There you can display a message if the validation failed.
Related
I want to pass data to back bean through ajax call on command button click.
I have a form with couple of input text fields where each field is having ajax blur event.
Every thing is working fine in happy flow except in the flowing scenario.
Ajax blur event is invoking when i directly clicking on submit which is suppose to be happen before submit click, hence i should make another click on submit button to invoke ajax call to save my form.
Here is the code.
Input text fields:
<p:inputText id="txt_name"
value="#{partnerVO.partnerName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_name" preventPaste="false" />
<p:ajax update="txt_name" event="blur" />
</p:inputText>
<p:inputText id="txt_assigned"
value="#{partnerVO.assignedName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_assigned" preventPaste="false" />
<p:ajax update="txt_assigned" event="blur" />
</p:inputText>
Command Button:
<p:commandButton id="btn_save"
title="Save"
value="#{lbl['tpdetails.remove.additional.address']}"
update="#form" process="#this"
action="#{partnerDetailsController.save}">
</p:commandButton>
I'm using JSF 2.2
Please provide some suggestions to overcome this strange behavior.
Note: omitted form related code here.
In this example
<f:ajax event="blur" render="errorsID">
<h:inputText id="nameID" value="#{tempName}">
<f:validateLength minimum="2"/>
<f:converter converterId="upCase"/>
</h:inputText>
<h:inputText id="emailID" value="#{tempEmail}">
<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]#[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]"/>
<f:converter converterId="lowCase"/>
</h:inputText><br/>
<h:messages id="errorsID" errorStyle="color:red"/>
</f:ajax>
I have the latest error message in real time but never both, as soon as i make an email error it displays that overriding the name error and vice versa, but if i remove the f:ajax component and use a h:commandButton to refresh, i have both the errors properly displayed. Do i need to use a different event ?
on valuechange event of select one menu component, i can see the changes applied to the model / java, but i dont see changes applied to input components on page.
when i do a F5, i see the changes but other data input by user gets lost.
i want to do a refresh without user loosing his data entered which is not submitted yet.
how can this be achieved using jsf ajax.
i am calling java code using f:valueChangeListener. for ajax i am using a4j:ajax
<h:selectOneMenu rendered="" value="" immediate="true">
<f:selectItems value="" />
<a4j:ajax event="change" execute="#this" render="#form" />
<f:valueChangeListener binding="" />
</h:selectOneMenu>
In my JSF application if I refresh the page everything get's rendered exceted the primeface graphicimages and jsf <f:ajax /> isn't working. If I wait 5 seconds the ajax calls are working again and graphicimages are getting loaded.
Another example is when I upload an image. The image get procced, uploaded and the site get's refreshed. After this the image is displayed, but ajax calls won't work after a few seconds after.
The app runs on a JBoss 7.1 with JSF 2.1
Is this a problem with slow hardware or something else. I would be happy with any hints because I don't really know where to look for a solution.
Example:
<p:selectOneRadio id="options" value="#{gameWriter.uploadCover}">
<f:selectItem itemLabel="ja" itemValue="true"/>
<f:selectItem itemLabel="nein" itemValue="false"/>
<f:ajax/>
</p:selectOneRadio>
When you define the f:ajax, try to give the UI components you want to execute and update. Also give the event. If you want process the whole form and update the whole page, you can use #form and #all in the f:ajax.
An example with #form and #all with f:ajax is as follows.
<h:form>
<p:selectOneMenu id="cmb" value="#{investigationItemController.current}" >
<f:selectItem itemLabel="Please select an item" />
<f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
<f:ajax event="change" execute="#form" render="#all"/>
</p:selectOneMenu>
<h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>
An example with primefaces ajax command is as follows.
<h:form>
<p:selectOneMenu id="cmb" value="#{investigationItemController.current}" >
<f:selectItem itemLabel="Please select an item" />
<f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
<p:ajax event="change" process="cmb" update="lbl"/>
</p:selectOneMenu>
<h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>
We can add more than one or for one UI Component if we want to execute the logic for more than one event.
Events for standard JSF UI component can be taken after removing the 'on' from the list of attributes of the UI component starting with 'on'. For example if JSF UI support onChange as an attribute you can use event="change".
For primefaces UI components, the possible events are listed under Primefaces documentation.
It is essential to correctly select the event in order for a successful ajax response.
Is there a way to let JSF do validations for my inputs but let me control how to display the validation errors? I want to avoid using h:message
I find it making my code too messy when I write a h:message component below every input components inside forms needing validation support. Since there are several forms on the page using h:messages is not an option as that would show the error messages of other forms as well. So I want to handle the error messages sent after validation to the presentation layer & do the errors presentation task myself using JS/Jquery. So how do I handle errors thrown by JSF validation service?
Just conditionally render the <h:messages> based on UIForm#isSubmitted().
<h:form binding="#{form1}">
<h:messages rendered="#{form1.submitted}" />
...
</h:form>
<h:form binding="#{form2}">
<h:messages rendered="#{form2.submitted}" />
...
</h:form>
<h:form binding="#{form3}">
<h:messages rendered="#{form3.submitted}" />
...
</h:form>
Or just bring in some ajax magic and update the current form only instead of the entire view.
<h:form>
<h:messages />
...
<h:commandButton ...><f:ajax execute="#form" render="#form" /></h:commandButton>
</h:form>
<h:form>
<h:messages />
...
<h:commandButton ...><f:ajax execute="#form" render="#form" /></h:commandButton>
</h:form>
<h:form>
<h:messages />
...
<h:commandButton ...><f:ajax execute="#form" render="#form" /></h:commandButton>
</h:form>
So I want to handle the error messages sent after validation to the presentation layer & do the errors presentation task myself using JS/Jquery.
Create a custom component or renderer which replaces the <h:messages>.