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.

Dave Maple · Answer 1 · 2011-06-02T03:13:37.527

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.

I see where you're going, but are you aware that IceFaces has already builtin ajax support? — BalusC, Feb 17 '11 at 03:10
i've never used icefaces before. the f:ajax could be replaced w/ icefaces ajax functions for sure. just wanted to illustrate the concept. — Dave Maple, Feb 17 '11 at 14:38

score 0 · Answer 2 · answered Feb 17 '11 at 10:53

0

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.

answered Feb 17 '11 at 10:53

Matt Handy

29,855
2
89
112

I think there must be easier ways than a phaselistener. At least, how I would in theory do it for plain JSF2 wouldn't require a phaselistener. – BalusC Feb 17 '11 at 11:39

score 0 · Answer 3 · answered Feb 19 '11 at 13:34

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.

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

3 Answers3