问题 如果inputText验证失败或ajax调用启动,则取消激活commandButton功能


我在表单中有以下代码:

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

任何帮助赞赏。


3487
2018-01-16 21:55


起源



答案:


你可以使用按钮 disabled 它的属性。只需将其设置为 true 每当 FacesContext#isPostback() 回报 false (所以,这是一个初始请求),或者它是什么时候 true (因此,表单提交已经发生),然后检查是否 FacesContext#isValidationFailed() 回报 true (所以验证一般都失败了)。

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

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

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

16
2018-01-17 03:29



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


答案:


你可以使用按钮 disabled 它的属性。只需将其设置为 true 每当 FacesContext#isPostback() 回报 false (所以,这是一个初始请求),或者它是什么时候 true (因此,表单提交已经发生),然后检查是否 FacesContext#isValidationFailed() 回报 true (所以验证一般都失败了)。

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

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

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

16
2018-01-17 03:29



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