I got a TextBox with a validator and a commandbutton. When the validation of the textbox fails I want to disable the commandbutton otherwise it should be enabled. I don't want to use any codebehind so it should be working without any helper properties in the bean.
So how can I tell the commandbutton to be disabled/enabled depending on the validator state?
<h:outputLabel for="category" value="#{msg['category.create']}"/>
<h:inputText id="category" required="true" label="#{msg['category.create']}" value="#{CreateCategoryBean.newCategory.name}" >
<f:validator validatorId="Get.Validator.CategoryValidator" />
<f:ajax event="keyup" render="categorymessage" />
</h:inputText>
<h:messages for="category" id="categorymessage"/>
<h:commandButton id="submit" value="#{msg['default.create']}" action="#{CreateCategoryBean.CreateCategory()}"
As you've already a <f:ajax event="keyup">, just let it update the <h:commandButton> as well wherein you in turn in its disabled attribtue check if UIComponent#isValid() of <h:inputText> doesn't return false.
<h:inputText binding="#{category}" ...>
<f:ajax ... render="categoryMessage submit" />
</h:inputText>
<h:commandButton id="submit" ... disabled="#{not category.valid}" />
No additional bean properties necessary. The above code is complete as-is.
See also:
How does the 'binding' attribute work in JSF? When and how should it be used?
Related
Here is what I am trying to do:
I have a form with multiple pairs of input fields and a save button.
When the save button is pressed then for each pair of input fields should be validated if they are numbers and if the left value is smaller than the right value.
If not the validation errors will be shown and if it is the case a dialog will pop up to ask for the name under which it should be saved.
Here is what I got so far:
<h:form>
<ui:repeat value="#{myBean.someList}" var="elem">
<h:inputText id="min#{elem.id}" value="#{elem.minimum}" />
<h:inputText id="max#{elem.id}" value="#{elem.maximum}" />
<br />
<h:message for="min#{elem.id}" style="color:red" />
<h:message for="max#{elem.id}" style="color:red" />
</ui:repeat>
<h:commandButton value="save">
<f:ajax execute="#form" render="#form updateValidationFailedFlag"
onevent="
function(ajaxResult){
if(ajaxResult.status=='success' && !globalValidationFailedFlag)
showSaveDialog();
}"
/>
</h:commandButton>
<h:outputScript id="updateValidationFailedFlag">
globalValidationFailedFlag = #{facesContext.validationFailed};
</h:outputScript>
</h:form>
This works but doesn't check if the minimum is smaller then the maximum.
It will validate the input (checks if the input are integer) and shows the save dialog if no validation error occured.
To check if the minimum is smaller then the maximum I tried to follow the tutorial at http://www.mkyong.com/jsf2/multi-components-validator-in-jsf-2-0/
Variant 1 adds a listener after the validation is done and is able to add error messages that are shown in the browser. But that doesn't count as a validation failure and doen't set the facesContext.validationFailed flag.
Variant 2 writes a custom validator for one component and gives the other component as parameter to that validator. That would look something like this:
<f:validator validatorId="myValidator" />
<f:attribute name="maximum" value="#{max#{elem.id}}" />
That is not really valid EL and I don't know how to write it correctly.
What can I do to validate if each of those min-max pairs is valid
You don't need #{elem.id} here. The <ui:repeat> already takes care of that. It would be evaluated to an empty string anyway when JSF needs to set the id attribute.
<ui:repeat value="#{myBean.someList}" var="elem">
<h:inputText id="min" value="#{elem.minimum}" />
<h:inputText id="max" value="#{elem.maximum}" />
<br />
<h:message for="min" style="color:red" />
<h:message for="max" style="color:red" />
</ui:repeat>
As to the validation, just pass the value of the other component along:
<h:inputText id="min" binding="#{min}" value="#{elem.minimum}" />
<h:inputText id="max" value="#{elem.maximum}">
<f:validator validatorId="myValidator" />
<f:attribute name="min" value="#{min.value}" />
</h:inputText>
Note that I moved the validator to the second component. Otherwise it would be still invoked if the second component didn't pass conversion.
If you happen to use JSF utility library OmniFaces, then you could use its <o:validateOrder> instead.
<h:inputText id="min" value="#{elem.minimum}" />
<h:inputText id="max" value="#{elem.maximum}" />
<o:validateOrder components="min max" showMessageFor="min" />
See also:
How to use EL with <ui:repeat var> in id attribute of a JSF component
JSF doesn't support cross-field validation, is there a workaround?
In my JSF 2.2 application on Glassfish 4.0, i need to allow update of single fields within a page.
For each field, i created a h:form containing two ui:fragments.
Each of there fragments is rendered based on the value of a boolean edit attribute named enteEdit in my backing bean FascicoloDettaglio.
FascicoloDettaglio is #ViewScoped.
The first fragment contains an h:outputText with the value from my bean, and a h:commandLink used to update the edit attribute and fire an AJAX request to re-render the form, which causes the first fragment to disappear and the second fragment to appear.
The second fragment contains the h:inputText used to edit the field, and the submit h:commandButton, which resets the edit attribute and then AJAX-calls the action method.
However, the second button never works; the action is not called and the button simply does nothing; while it should call the action and then re-render the entire form, turning the second fragment off and the first on.
I can't understand why it doesn't work.
This is the JSF code fragment:
<h:form>
<ui:fragment rendered="#{not fascicoloDettaglio.enteEdit}">
<h:outputText value="#{fascicoloDettaglio.fascicolo.ente}" />
<h:commandLink rendered="#{request.isUserInRole('affgen')}">
<h:graphicImage name="img/modify.png" width="24" height="24" title="Modifica" />
<f:ajax render="#form" />
<f:setPropertyActionListener target="#{fascicoloDettaglio.enteEdit}" value="true" />
<f:setPropertyActionListener target="#{fascicoloDettaglio.ente}" value="#{fascicoloDettaglio.fascicolo.ente}" />
</h:commandLink>
</ui:fragment>
<ui:fragment rendered="#{fascicoloDettaglio.enteEdit}">
<h:inputText value="#{fascicoloDettaglio.ente}" requiredMessage="Introdurre l'ente ricorrente." required="true" styleClass="largetext #{component.valid ? '' : 'inputvalidationerror'}">
<f:validateLength maximum="255" />
</h:inputText>
<h:commandButton action="#{fascicoloDettaglio.salvaEnte}" value="Salva">
<f:setPropertyActionListener target="#{fascicoloDettaglio.enteEdit}" value="false" />
<f:ajax execute="#form" render="#form" />
</h:commandButton>
<h:messages />
</ui:fragment>
</h:form>
Any help would be very appreciated.
A has many required inputs and validations. A couple of command buttons control different inputs.
I can change required attibrute with the value of <f:param>. For instance when a button is clicked,it sets a value.This value changes if an input is required or not. Like this:
<p:commandButton>
<f:param name="button1" value="1"></f:param>
</p:commandButton>
<h:inputText required="#{param['button1'] == 1}"></h:inputText>
This actually works.However i also want to add some valitations like max length.I want to temporarily change this validation too.
I tried to disable valitadion,but i did not work:
<f:validateLength disabled="true" maximum="10"></f:validateLength>
You seem to be using JSF 2.x already. So just use <f:ajax execute> or <p:commandButton process> to specify client IDs of components which are to be executed/processed when the button is pressed. All components which are not included in this will just be ignored and not converted/validated.
E.g.
<h:inputText id="input1" ... required="true" />
<h:inputText id="input2" ... required="true" />
<h:inputText id="input3" ... required="true" />
<h:inputText id="input4" ... required="true" />
<p:commandButton value="Submit inputs 1 and 2" process="input1 input2" ... />
<p:commandButton value="Submit inputs 3 and 4" process="input3 input4" ... />
In case of <p:commandButton> it defaults to #form (i.e. the entire current form).
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
When I hit the commandButton it puts in the value that product.amount started as rather than what is currently typed in the input box.
<h:inputText value="#{product.amount}" />
<h:commandButton id="Button"
value="Buy"
tabindex="2" >
<f:ajax listener="#{shopBean.addToCart(product.product, product.amount)}"
execute="#this"
render="#all" />
</h:commandButton>
You need to include the input field in the execute attribute of the <f:ajax> so that it get processed as well, otherwise it will simply be ignored altogether.
<h:inputText id="amount" ... />
<h:commandButton ...>
<f:ajax execute="#this amount" ... />
</h:commandButton>
Or just put the whole in a single form and use execute="#form".
<h:form>
<h:inputText ... />
<h:commandButton ...>
<f:ajax execute="#form" ... />
</h:commandButton>
</h:form>
By the way, the render="#all" defeats one of the main advantages of using ajax. Try to render exactly only the component(s) which actually needs to be updated.
This is my Facelet:
<h:inputText id="input" value="#{managedBean.runner.postnr}" maxlength="4" size="4">
<f:ajax execute="#this" onevent="blur" render="output" />
</h:inputText>
<h:outputText id="output" value="#{managedBean.placeFromPostNR}"/>
I'm trying to autoupdate outputText with a value from managedBean.placeFromPostNRwhen the user exit's the inputText. But this does not work at all.
Here's my managedBean.placeFromPostNR code:
public String getPlaceFromPostNR(){
return db.getPlaceFromPostNR(runner.getPostnr());
}
This method is never invoked, have some printlines as test.
I've even tried with setting <h:outputText id="output" value="#{managedBean.runner.postnr}"/> and setting onevent="keyup" to check if my methods which gives the error. But this doesn't work either.
The onevent attribute is invalid. It should be event.
<f:ajax execute="#this" event="blur" render="output" />