如果 inputText 验证失败或 ajax 调用开始，则停用 commandButton 功能答案

【问题标题】：Deactivating commandButton functionality if inputText validation fails or ajax call starts如果 inputText 验证失败或 ajax 调用开始，则停用 commandButton 功能
【发布时间】：2012-02-11 19:09:03
【问题描述】：

我在表单中有以下代码：

<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>

因此验证消息在inputText 元素上运行良好。但是提交按钮在单击时仍然发出 Ajax 请求，即使输入无效。如果 inputText 有效，我希望发送 Ajax 请求。

我该怎么做？

此外;还有另一种情况我想停用按钮。这是 inputText 被验证并且用户单击按钮的情况。这样做的原因是，我不希望用户错误地淹没请求。（即反复按下提交按钮）

目前，handleOnclick javascript 函数只显示一个显示“等待”的模式对话框。由于该对话框是模态的，因此无法访问背景。但是，这仍然不能阻止用户重复按下它，因为在 onclick 和模态对话框显示之间经过了 1 秒。此外;这种方法不会阻止提交无效数据。你有什么建议？

我使用 JSF2.0 和 Primefaces 3.0。

任何帮助表示赞赏。

【问题讨论】：

标签： validation jsf jsf-2 primefaces

【解决方案1】：

您可以使用按钮的disabled 属性。只要FacesContext#isPostback()返回false（所以，这是一个初始请求），或者当它是true（所以，表单提交已经发生）时，只需将其设置为true，然后检查FacesContext#isValidationFailed()是否返回true （因此验证通常失败）。

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

您只需要确保在 ajax 请求上也更新按钮，以便在必要时启用或禁用它。

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

【讨论】：

感谢 BalusC 的回答。您建议的功能正常，但用户体验不佳。当我加载页面并在 inputText 中输入一些有效文本时，不会立即启用 commandButton。由于它最初在页面加载时被禁用，因此在输入有效内容后，我必须单击页面上的其他位置，以便触发模糊事件并启用按钮。只有这样我才能点击按钮。但是，这可能会导致糟糕的用户体验。我该如何处理？
所以只有一个输入字段？我了解到您有多个需要验证的输入字段。然后您可以删除#{facesContext.postback} 检查。
所以我现在只有disabled="#{facesContext.validationFailed}"。这解决了我提到的问题，但是当验证失败时也会发生同样的事情。我加载页面，输入无效的内容，按钮被禁用。然后我输入了一些有效的东西，但必须单击其他地方才能再次启用该按钮。只有这样我才能点击按钮。在这种情况下，您有什么建议可以防止糟糕的用户体验？
您可以使用keyup 而不是blur，但这会导致更多的ajax 请求。或者，根本不要禁用按钮:)
我可以告诉 JSF 在客户端进行这些验证吗？为什么它仍然是 Ajax？ :) 恐怕如果按钮在无效输入时没有被禁用，用户可以提交无效请求。如果输入无效，我不希望按钮工作或提交任何内容。