Validation with JSF 2 only wanted on submit - validation

I have an issue with validation, as I only want validation to take place when the submit button is clicked on the screen, not when another button is clicked.
In the displayed page option1.faces is the main file option1.xhtml, and several included files. Below are fragments of code from the main page and two of the included files:
Code in option1.xhtml:
<h:inputText size="4" maxlen="5" id="teff1" value="#{option1.teff1}">
<f:validateDoubleRange minimum="#{option1.teff1Min}" maximum="#{option1.teff1Max}"
disabled="#{simulator.validate}"/>
</h:inputText>
Code in abundances0.xhtml that is included in option1.xhtml:
<h:selectOneMenu id="abundanceSet0" value="#{abundance.abunSet0}" style="height:25px; width:180px;">
<f:selectItems value="#{abundance.abunSetMap}"/>
</h:selectOneMenu>
<p:spacer width="37" height="0"/>
<p:commandButton value="Select Set" actionListener="#{abundance.selectSet0}" update="abundances0"/>
Code in footerButtons.xhtml that is included in option1.xhtml:
<h:message for="teff1" style="color:red"/>
<h:commandButton value="Submit" disabled="#{!login.loggedIn}" action="#{simulator.submit}" onclick="resetForm()"
actionListener="#{simulator.validate}" class="button"/>
The fragments of code from the corresponding beans are here:
MyOption1Bean:
#ManagedBean(name="option1")
#SessionScoped
public class MyOption1Bean implements Serializable {
// Lots of other private variables and objects
private String teff1;
private String teff1Min;
private String teff1Max;
// Option 1 constructor to initialze limits
public MyOption1Bean() {
ResourceBundle bundle = ResourceBundle.getBundle("com.csharp.validation");
teff1Min = bundle.getString("teff1Min");
teff1Max = bundle.getString("teff1Max");
}
public String getTeff1() {
return teff1;
}
public void setTeff1(String teff1) {
this.teff1 = teff1;
}
// Lots of getters, setters, methods, etc.
}
MyAbundanceBean:
#ManagedBean(name="abundance")
#SessionScoped
public class MyAbundanceBean implements Serializable {
// Lots of other private variables and objects
public String getAbunSet0() {
return abunSet[0];
}
public void setAbunSet0(String abunSet) {
this.abunSet[0] = abunSet;
}
public Map<String,String> getAbunSetMap() {
return abunSetMap;
}
public void selectSet0(ActionEvent e) {
selectSet(0);
}
// Lots of getters, setters, methods, etc.
}
MySimulatorBean:
#ManagedBean(name="simulator")
#SessionScoped
public class MySimulatorBean implements Serializable {
// Lots of other private variables and objects
private boolean validate;
// When validate is true disabled is false so validation takes place.
public boolean isValidate() {
return !validate;
}
// When navigating away from the home page to one of the options, reset the error
// and validate flags.
public void resetError(ActionEvent event) {
error = false;
validate = false;
}
// On clicking "Submit" this enables the validate flag.
public void validate(ActionEvent event) {
validate = true;
}
// On clicking "Submit" this gets the user's input, and if succesful sends it to an output file then
// navigate to a "Success" page, otherwise return to the original page.
public String submit() {
// Code to check for errors and output data to a file.
}
// Lots of getters, setters, methods, etc.
}
In option1 (the xhtml and the bean files) the user enters a value for teff1, which must be between teff1Min and teff1Max, which are obtained from a properties file. This works correctly, and if a value for teff1 is not given or is out of range, on clicking the "Submit" button, as given in the footerButtons.xhtml, the submit fails and and the <h:message/> tag displays an error.
However, before clicking "Submit", if the input field for teff1 is empty or has a wrong value,
the <p:commandButton value="Select Set" .../> in the included abundances0.xhtml does not work. It is supposed to update a display with a chosen menu, which otherwise it does. I set the immediate
attribute of <p:commandButton value="Select Set" /> to true, but it still does not work. I only want the validation to take place when the "Submit" button is clicked, and nothing else.
I tried an alternative way: where the flag validate in the simulator bean is used to disable the validation until it is wanted. Namely, when the option1 page is visited it is false, to disabled is true, and no validation is done until the submit button is clicked, at which point it is set to true, so disabled is false. Unfortunately, this dose not work, as JSF thinks the page is valid and navigates away from it before validation is performed. This is in spite of the fact that validate() is executed before submit() in the simulator bean. This is confirmed by inserting a print statement in each of them.
Does anybody have any idea as to what is going on?, and is there an easy way of making sure that validation only takes place when the submit button is clicked? Otherwise the display is locked up, and I'm unable to make the other buttons work.
Many thanks for the clarification, and I did exactly what you suggested. I did the following:
First I put immdiate="true" in the command button that selects a menu in my abundances0.xhtml file:
<p:commandButton value="Select Set" actionListener="#{abundance.selectSet0}" update="abundances0" immediate="true"/>
then I changed the action in my abundance bean java file:
public void selectSet0(ActionEvent e) {
selectSet(0);
FacesContext.getCurrentInstance().renderResponse();
}
but it still does not work. If I click the button nothing happens unless a valid value is already in the input field for teff1 in the option1.xhtml file at the beginning. I need this button to work, together with other ones like it, regardless of what is in the input field, until the submit button is clicked. As far as I can see, I am doing everything correctly.
Icidentally, I'm using JSF 2.0 with PrimeFaces 3.4.2 and Eclipse Indigo.

The <p:commandButton> processes by default the entire form, as in process="#form".
You need to tell it to process only itself, as in process="#this".
<p:commandButton ... process="#this" />
This way all input components in the same form won't be processed (converted/validated/updated).

First of all, validation in JSF is performed in one of the Faces lifecycle, to be more specific, it's done at PROCESS_VALIDATIONS phase. The only way to skip validation is to instruct the Faces' lifecycle to skip that phase.
In JSF input & command components have an immediate attribute, which means that those with a true value for it will be processed during the APPLY_REQUEST_VALUES phase, instead of going through the whole Faces' lifecycle.
Behaviour is slightly different depending of the type of component:
input components with immediate="true" will be validated at APPLY_REQUEST_VALUES phase instead of the PROCESS_VALIDATION one.
command components with immediate="true" will be executed at APPLY_REQUEST_VALUES phase instead of the INVOKE_APPLICATION one.
So, to skip validation, a possible approach would be to have a <h:commandButton /> with immediate="true" and then, at the backing bean side invoke either FacesContext.getCurrentInstance().renderResponse() or FacesContext.getCurrentInstance().requestComplete() to tell Faces to skip the remaining lifecycle phases.
So, in your select0 method should be:
public void selectSet0(ActionEvent e) {
selectSet(0);
FacesContext.getCurrentInstance().renderResponse(); // skip the remaining phases and go straight to RENDER_RESPONSE
}
NOTE: Bear in mind that when submitting a form with an immediate command will trigger the validation in all of the immediate inputs of that form.

Related

Primefaces p:cache

I'm having some problem with Primefaces p:cache component
This is example how its used on testpage/index.xhtml
<h:form>
<p:panel header="Testsite">
<p:cache region="testsite2"
key="testsite2#{user.id}#{user.defaultLanguage}">
<p:commandButton action="#{testBean.hello}" value="btn"
rendered="#{testBean.renderedButton}">
</p:commandButton>
</p:cache>
</p:panel>
</h:form>
and this is back end bean
#ManagedBean(name = "testBean")
#ViewScoped
public class TestBean {
#PostConstruct
public void init() {
System.out.println("init");
}
public void hello() {
System.out.println("hello");
}
public boolean isRenderedButton() {
System.out.println("isRenderedButton");
return true;
}
}
So on first page hit init and isRenderedButton message are printed normally as expected. After that when I click on button I do expect to see hello message printed, but that's not case here. Can anyone point me in right direction ?
According to Primefaces showcase for p:cache with buttons I was expecting this behavior.
Right now I am using Primefaces.DEFAULT_CHACHE_PROVIDER and later I will switch to ehcache.
I'm using PF 5.3, sun faces 2.2.12.
Thanks.
To answer myself (and maybe ill help someone), i was trying to create dynamic menu from database and i wanted to cache generated content with p:cache component. But back then every menu item would call bean method which would redirect user to page and that was problem in first place.
So i had something like this:
<p:menu>
<p:submenu label="Human resource">
<p:menuitem value="Search person" actionListener="#{bean.navigateUserToSearchPerson}"/>
</p:submenu>
I actually did not fix this problem (had no extra time to investigate problem), so i came up with idea to generate links for each menu item, so when user clicks on menu item, it would redirect him to new page. So now i don't have any AJAX calls in menu and caching works fine now.
Code example:
<p:cache region="appUiCache" key="panelMenu#{user.id}#{user.defaultLanguage}">
<p:panelMenu id="sm" model="#{bean.menuModel}" stateful="true" />
</p:cache>
Menu items are created dynamically from database:
DefaultMenuItem defaultMenuItem = new DefaultMenuItem(...);
defaultMenuItem.setIcon(item.getIcon());
defaultMenuItem.setUrl(item.getUrl()); <!-- This is new url part -->
This works fine now in production. Thanks.

How to enable/disable specific item in selectManyCheckbox on ajax keyUp

I need your help in enabling/disabling a specific item in the selectManyCheckbox component based on the ajax call keyup.
When the page loads, I am firing the below method to populate the selectManyCheckbox items in the form:
#PostConstruct
public void init() throws SQLException {
this.hrCertificatesList.add(new hrCertificate(("Employment"), "CE", false));
this.hrCertificatesList.add(new hrCertificate(("Loan"), "LC", false));
}
And here is the jsf code:
<p:inputText id="selectedEmployee" value="#{HRRequest.selectedEmployeeCode}">
<p:ajax event="keyup" update="employeeName" listener="#{HRRequest.getEmployeeName}" />
</p:inputText>
<h:outputText id="employeeName" value="#{HRRequest.selectedEmployeeName}" />
<p:selectManyCheckbox id="hrCertificates" value="#{HRRequest.selectedHRCertificates}">
<f:selectItems value="#{HRRequest.hrCertificatesList}" var="hrCertificate"
itemLabel="#{hrCertificate.hrCertificateName}"
itemValue="#{hrCertificate.hrCertificateCode}" itemDisabled="#{hrCertificate.hrBooleanCertificate}"/>
</p:selectManyCheckbox>
Once the page loads, all the checkboxes are enabled and when the user enters employeeCode in the inputText, an ajax will be fired to call a method to get the employeeName and to check whether has loan or not, if has loan, then the checkbox should be enabled, otherwise disabled.
To summarize my issue, what I want is that when the value of the variable temp equals to yes, then I need to disable the loan checkbox only and the other item Employment should remain enable, so how can I do this?
The bean code is:
public String getEmployeeName() throws SQLException {
if (temp.equals("Yes"))
{
//How to enable and disable the Loan checkbox only and to update the form view
RequestContext.getCurrentInstance().update(":HRform:hrCertificates");
}
So can you please help.
Just manipulate the model in such way that itemDisabled="#{hrCertificate.hrBooleanCertificate}" evaluates true instead of false so that the view knows what it must do.
One way might be:
this.hrCertificatesList.get(1).setHrBooleanCertificate(true);

When to use valueChangeListener or f:ajax listener?

What's the difference between the following two pieces of code - with regards to listener placement?
<h:selectOneMenu ...>
<f:selectItems ... />
<f:ajax listener="#{bean.listener}" />
</h:selectOneMenu>
and
<h:selectOneMenu ... valueChangeListener="#{bean.listener}">
<f:selectItems ... />
</h:selectOneMenu>
The valueChangeListener will only be invoked when the form is submitted and the submitted value is different from the initial value. It's thus not invoked when only the HTML DOM change event is fired. If you would like to submit the form during the HTML DOM change event, then you'd need to add another <f:ajax/> without a listener(!) to the input component. It will cause a form submit which processes only the current component (as in execute="#this").
<h:selectOneMenu value="#{bean.value}" valueChangeListener="#{bean.changeListener}">
<f:selectItems ... />
<f:ajax />
</h:selectOneMenu>
When using <f:ajax listener> instead of valueChangeListener, it would by default executed during the HTML DOM change event already. Inside UICommand components and input components representing a checkbox or radiobutton, it would be by default executed during the HTML DOM click event only.
<h:selectOneMenu value="#{bean.value}">
<f:selectItems ... />
<f:ajax listener="#{bean.ajaxListener}" />
</h:selectOneMenu>
Another major difference is that the valueChangeListener method is invoked during the end of the PROCESS_VALIDATIONS phase. At that moment, the submitted value is not been updated in the model yet. So you cannot get it by just accessing the bean property which is bound to the input component's value. You need to get it by ValueChangeEvent#getNewValue(). The old value is by the way also available by ValueChangeEvent#getOldValue().
public void changeListener(ValueChangeEvent event) {
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
// ...
}
The <f:ajax listener> method is invoked during INVOKE_APPLICATION phase. At that moment, the submitted value is already been updated in the model. You can just get it by directly accessing the bean property which is bound to the input component's value.
private Object value; // +getter+setter.
public void ajaxListener(AjaxBehaviorEvent event) {
System.out.println(value); // Look, (new) value is already set.
}
Also, if you would need to update another property based on the submitted value, then it would fail when you're using valueChangeListener as the updated property can be overridden by the submitted value during the subsequent UPDATE_MODEL_VALUES phase. That's exactly why you see in old JSF 1.x applications/tutorials/resources that a valueChangeListener is in such construct been used in combination with immediate="true" and FacesContext#renderResponse() to prevent that from happening. After all, using the valueChangeListener to execute business actions has actually always been a hack/workaround.
Summarized: Use the valueChangeListener only if you need to intercept on the actual value change itself. I.e. you're actually interested in both the old and the new value (e.g. to log them).
public void changeListener(ValueChangeEvent event) {
changeLogger.log(event.getOldValue(), event.getNewValue());
}
Use the <f:ajax listener> only if you need to execute a business action on the newly changed value. I.e. you're actually interested in only the new value (e.g. to populate a second dropdown).
public void ajaxListener(AjaxBehaviorEvent event) {
selectItemsOfSecondDropdown = populateItBasedOn(selectedValueOfFirstDropdown);
}
If you're actually also interested in the old value while executing a business action, then fall back to valueChangeListener, but queue it to the INVOKE_APPLICATION phase.
public void changeListener(ValueChangeEvent event) {
if (event.getPhaseId() != PhaseId.INVOKE_APPLICATION) {
event.setPhaseId(PhaseId.INVOKE_APPLICATION);
event.queue();
return;
}
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
System.out.println(newValue.equals(value)); // true
// ...
}
for the first fragment (ajax listener attribute):
The "listener" attribute of an ajax tag is a method that is called on the server side every time the ajax function happens on the client side. For instance, you could use this attribute to specify a server side function to call every time the user pressed a key
but the second fragment (valueChangeListener) :
The ValueChangeListener will only be called when the form is submitted, not when the value of the input is changed
*you might like to view this handy answer

JSF2 Composite component link using ajax

Here is my (simplified) issue :
I've got a page that is using 2 composite components of mine :
- CCSelection
- CCDisplay
In CCSelection, I have a list of values, each one has got a h:commandLink onto.
When clicking on a link, the CCDiaplay component is refreshed using the selected value.
To do this, CCSelection exposes a method attribute that is directly linked on each h:commandLink. The value is given to the method using f:attribute.
In the page backing bean, I've got a method (that is given to CCSelection as an attribute), that sets a member.
CCDisplay gets this value though an cc:attribute via the pages's member's getter.
It works !
Now, I want to ajaxize this behaviour.
I tryed to put an f:ajax for each h:commandLink in CCSelection... but if I put #form or #all in the render attribute, nothing is rendered (but the setter methods are called). If I put the id of the UIComponent (of the Page) to render, I get a nullpointerexception saying that a property is not defined for NamingContainer in CCDisplay. Quite strange because I didn't change anything inside CCDisplay !
I think the solution is to put the f:ajax not inside CCSelection but in Page.
So there may be 2 ways to achieve this :
- CCSelection raises an event f:ajax can manage... but how ?
- Using cc:clientBehaviour for CCSelection. But is it possible to target more that 1 component (I've got many h:commandLink, but I want only 1 event).
- Other ways ?
Here is a pseudo code
page.xhtml
<myComp:ccSelection actionMethod="#{pageBean.select}"
render="#{clientIDHelper.clientId['display']}" />
<h:panelGroup id="diplay" binding="#{clientIDHelper.bindings['display']}">
<myComp:ccDisplay value="#{pageBean.value}" />
</h:panelGroup>
To recover the full clientid of the panel containing the ccDiaplay composite component, I use a clientIDMap technic described here.
PageBean.java
private String _value;
public String getValue() { return _value; }
public void setValue(String value) [ _value = value; }
public void select(String value) {
setValue(value);
}
ccSelection.xhtml
<cc:interface>
<cc:attribute method-signature="void selectAction(String)"
name="actionMethod" />
<cc:attribute name="render" />
</cc:interface>
<cc:implementation>
<t:dataTable value="#{cc.values}"
var="val"
...
>
<h:column>
<t:commandLink actionListener="#{cc.selectionValueListener}"
<f:ajax render="#{cc.attrs.render}" />
<f:attribute name="value"
value="#{val}" />
</t:commandLink>
</h:column>
</t:dataTable>
</cc:implementation>
ccSelection.java
public void selectionValueListener() {
// recover the attribute value
String value = event.getComponent().getAttributes().get("value");
// call the callback method of the page
FacesContext context = FacesContext.getCurrentInstance();
MethodExpression method = (MethodExpression) this.getAttributes().get("actionMethod");
if (method != null)
method.invoke(context.getELContext(), new Object[] {value});
}
I don't think ccDisplay is interressting.
So, if I don't put the f:ajax tag, it works.
When I put the f:ajax with the render pointing to the clientId passed in param, I get an error while loading the page.
If I change the render for #form or #all, the pageBean.select method is called, but ccDisplay is not refreshed.
I think i see a little error in page.xhtml.
See when you created the component cc:display you said:
<cc:attribute method-signature="void selectAction(String)" name="actionMethod" />
That means that a parameter is needed.
But when you call it in page.xhtml you do this:
<myComp:ccSelection actionMethod="#{pageBean.select}"...
And its backing bean method is:
public void select(String value) {
setValue(value);
}
As you see the backing bean is correct, but when you call the component in the page, there is no parameter being passed to the bean, and at the end the value is never set.
I think that might be one of the reasons.
To fix it i think you should pass the value some how:
<myComp:ccSelection actionMethod="#{pageBean.select(???Selected value
???)}"...
OK. It is solved... but I don't like it very much.
You'll think I'm a fool : I solved the problem by removing the <![CDATA surrounding my scripts !
I've already found some issue using CDATA. I don't know if this is a MyFaces bug or something I do the wrong way like putting many h:outputScript blocks with CDATA in composite components but with CDATA, I get errors or not working. Just removing it, it works !

Value remains in form field after it is cleared in bean in JSF2

In my JSF2 application, I have "Clear" button, which is supposed to clear all the fields. However, it doesn't always work.
My page fragment:
<h:form id="bi">
<h:inputText value="#{bean.entity.firstname}" />
<h:inputText value="#{bean.entity.surname}" />
<h:commandButton value="Clear" immediate="true" action="#{bean.clear}">
<f:ajax render="bi" />
</h:commandButton>
<h:commandButton value="Submit" action="#{bean.submit}" />
</h:form>
And clear() method in my bean:
public void clear() {
entity = new Entity();
}
If I enter values in the fields, and click "Clear", everything is cleared as expected. However, consider such scenario:
1. Enter value only in one field (both are required by JSR303 annotations on entity).
2. Click "Submit". Error message appears.
3. Click "Clear".
Entered value remains. Why is it not cleared?
Moreover, if I clear it by hand, and click "Clear", it returns to the field. I checked that it comes to the browser in partial response after clicking "Clear" button. I suspect it has something to do with view state.
Moreover, if I add validator="#{bean.validate}" to the field, it enter this validation. Even if button has immediate="true" attribute. Why? Shouldn't immediate button ommit validation?
You've run into a more or less well-known issue regarding updating components for which validation has already happened.
This post is rather old, but still relevant: http://ishabalov.blogspot.com/2007/08/sad-story-about-uiinput.html
There is a community created solution for A4J in JSF 1.2 posted here: http://community.jboss.org/thread/8446?start=15&tstart=0
But unfortunately, this doesn't work directly in JSF 2.0 and in your case it wouldn't work at all since it's A4J specific. Nevertheless it might be a source of inspiration.
Basically you need to walk the component tree and clear its state. The neatest thing is to clear exactly the state of the components that you are going to re-render. But you might take the brute-force approach and just clear all if your particular application or page can tolerate that.
I wound up having to avoid submit or action to get the form to clear properly. I used actionListener with a void bean method instead.
But then I faced the problem of conditionally needing navigation which is usually done with a String method from action. I used ExternalContext.redirect() to accomplish that which I learned from the following:
JSF PostConstruct Exception Handling - Redirect
JSF navigation redirect to previous page
my page code:
<p:commandButton value="Login" update=":loginForm"
actionListener="#{loginBean.login}"/>
my bean code:
public void login() {
RtsLDAPAD laLdap = new RtsLDAPAD();
boolean lbAuthenticated = false;
try
{
lbAuthenticated = laLdap.login(userName, password);
System.out.println(
"The Result is " + lbAuthenticated + " for " + userName);
}
catch (Exception aeRTSEx)
{
aeRTSEx.printStackTrace();
}
if (lbAuthenticated) {
try {
FacesContext.getCurrentInstance().getExternalContext().redirect("taskform.jsf");
} catch (IOException e) {
e.printStackTrace();
}
} else {
FacesContext facesContext = FacesContext.getCurrentInstance();
facesContext.addMessage(null,
new FacesMessage("Login failed for " + userName + "."));
UIViewRoot uiViewRoot = facesContext.getViewRoot();
HtmlInputText inputText = null;
Password pwd = null;
inputText = (HtmlInputText) uiViewRoot.findComponent("loginForm:username");
inputText.setSubmittedValue(null);
inputText.setValue(null);
inputText.setLocalValueSet(false);
inputText.setValid(true);
pwd = (Password) uiViewRoot.findComponent("loginForm:password");
pwd.setSubmittedValue(null);
pwd.setValue(null);
pwd.setLocalValueSet(false);
pwd.setValid(true);
userName = null;
password = null;
}
}

Resources