Deactivating commandButton functionality if inputText validation fails or ajax call starts

Question

I have the following piece of code inside a form:

<p:panel id="panel" header="lalalala">
    <h:panelGrid columns="5">

        <h:outputLabel value="Enter name" for="name" />

        <p:inputText id="name" value="#{userBean.name}"
            required="true" label="name" maxlength="15"
            validatorMessage="oops"
            requiredMessage="ooopps">
            <f:validateRegex
                pattern="^somepattern$">
            </f:validateRegex>
            <p:ajax event="blur" update="inputValidationMessage" />
        </p:inputText>

        <p:message id="inputValidationMessage" showSummary="false"
            for="name" />
        <p:watermark for="name" value="eg. John" />

    </h:panelGrid>

    <p:commandButton id="submitButton" value="Submit" update="panel"
        actionListener="#{userBean.save}"
        onclick="handleOnclick"
        oncomplete="handleAjaxResponse(xhr, status, args)">
    </p:commandButton>
    <p:messages autoUpdate="true" globalOnly="true" showDetail="true" />
</p:panel>

So the validation messages work well on the inputText element. But the submit button is still making an Ajax request when clicked, even though the input is invalid. I want the Ajax request to be sent iff the inputText is valid.

How do I do that?

Furthermore; there is another case I'd like to deactivate the button. This is the case where inputText is validated and the user clicks the button. The reason for this one is, I don't want the user to mistakenly flood requests. (i.e repeatedly press the submit button)

Currently, the handleOnclick javascript function only shows a modal dialog box saying "wait". Since that dialog is modal, the background is inaccessible. However, that still doesn't prevent the user from pressing it repeatedly because 1 second passes between onclick and modal dialog showing. Furthermore; this approach doesn't prevent submitting invalid data. What can you suggest?

I use JSF2.0 and Primefaces 3.0.

Any help appreciated.

BalusC · Accepted Answer · 2012-01-17 03:29:14Z

20

You can use the button's disabled attribute for it. Just set it to true whenever FacesContext#isPostback() returns false (so, it's an initial request), or when it's true (so, a form submit has occurred), then check if FacesContext#isValidationFailed() returns true (so the validation has failed in general).

<p:commandButton ... disabled="#{not facesContext.postback or facesContext.validationFailed}" />

You only need to ensure that you update the button on ajax requests as well, so that it will reappear either enabled or disabled when necessary.

<p:ajax event="blur" update="inputValidationMessage submitButton" />

answered Jan 17, 2012 at 3:29

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Murat Derya Özen Over a year ago

Thanks for the answer BalusC. What you proposed is functioning but with bad user experience. When I load the page and enter some valid text into the inputText, the commandButton don't get enabled immediately. Since it's disabled initially on page load, after entering something valid, I have to click somewhere else on the page so that the blur event triggers and the buttons becomes enabled. Only then I can click the button. However, this may cause bad user experience. How can I deal with that?

BalusC Over a year ago

So there's a single input field? I understood that you have multiple input fields which needs to be validated. You can just remove the #{facesContext.postback} check then.

Murat Derya Özen Over a year ago

So I've only got disabled="#{facesContext.validationFailed}" now. That solves the problem I mentioned but the same thing happens when validation fails. I load the page, enter something invalid, button gets disabled. Then I enter something valid but have to click somewhere else to enable the button again. Only then I can click the button. What would you suggest to prevent bad user experience in such a scenario?

BalusC Over a year ago

You could use keyup instead of blur, but that'll result in more ajax requests. Alternatively, just don't disable the button at all :)

Murat Derya Özen Over a year ago

Can I tell JSF to do those validations on client-side? Why does it Ajax anyway? :) I'm afraid if the button is not disabled on invalid input, user can submit invalid requests. I don't want the button to work or submit anything if input is invalid.

|

Collectives™ on Stack Overflow

Deactivating commandButton functionality if inputText validation fails or ajax call starts

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related