Enable JSF commandbutton only if all the other components are error free

Question

I am using icefaces in my application. There is a form in the page, which has a couple of input fields.

I would like to enable the commandbutton only if the fields are valid(no errors for the other components)

Is it possible to do it ?

example code

<ice:form>
<ice:panelGrid  columns="2">
    <ice:outputLabel>Enter Date</ice:outputLabel>
        <ice:panelGroup>
            <ice:selectInputDate renderAsPopup="true" id="InputDate" value="#{Bean.FormDate}" partialSubmit="true" ></ice:selectInputDate> 
                <ice:message for="InputDate" />
        </ice:panelGroup>

     <ice:outputLabel>Days</ice:outputLabel>
        <ice:panelGroup>
            <ice:inputText value="#{Bean.days}"partialSubmit="true" id="inputDays">
                <f:validateLongRange minimum="1" maximum="10"/>
            </ice:inputText>
                <ice:message for="inputDays"/>
            </ice:panelGroup>

    <ice:commandButton value="Submit" action="#{Bean.SomeAction}"></ice:commandButton>
</ice:panelGrid>

In the above code, I want to enable the submit commandbutton only if the days and date are valid(Don't have any error enqueued.

Answer 1

If you are using jsf 2.0 you can do something like this:

    <ice:form>
        <ice:panelGrid columns="2">
            <ice:outputLabel>Enter Date</ice:outputLabel>
            <ice:panelGroup>
                <ice:selectInputDate renderAsPopup="true" id="InputDate"
                    value="#{Bean.FormDate}" partialSubmit="true"
                    binding="#{inputDateComponent}">
                    <f:ajax execute="@this" render="submit inputDateMessage" />
                </ice:selectInputDate>
                <ice:message id="inputDateMessage" for="InputDate" />
            </ice:panelGroup>

            <ice:outputLabel>Days</ice:outputLabel>
            <ice:panelGroup>
                <ice:inputText value="#{Bean.days}" partialSubmit="true"
                    id="inputDays" binding="#{inputDaysComponent}">
                    <f:validateLongRange minimum="1" maximum="10" />
                    <f:ajax execute="@this" render="submit inputDaysMessage" />
                </ice:inputText>
                <ice:message id="inputDaysMessage" for="inputDays" />
            </ice:panelGroup>

            <ice:commandButton id="submit" value="Submit"
                action="#{Bean.SomeAction}"
                disabled="#{!inputDateComponent.valid}" />
        </ice:panelGrid>
    </ice:form>

I haven't tested this specific example but you can see where I'm going. The input fields get evaluated on change and either show validation errors or create a condition where the commandButton is not disabled.

You could also use rendered= and make positive assertions if you want the button to only appear when the input fields are valid.

Answer 2

Switch each of your input fields to 'immediate="true"' and add a validator to the fields.

Have the validator set/unset a boolean to determine whether the fields contain valid data and do as sparrowhawk suggests and test this boolean value(s) in the rendered expression for the submit button.

Answer 3

You could use a phase-listener as described here:

http://balusc.blogspot.com/2007/12/set-focus-in-jsf.html

The phase-listener in this example builds a string with client-ids that have messages attached. Check this string in a bean and create a bean property depending on whether there are ids with messages or not.

Then you can enable the command button depending on the bean property.