如何在进行 AJAX-call 时 prevent/stop 提交命令按钮

Question

我有一个表单，其中包含几个不同的文本字段，用户需要填写这些字段才能进入下一步。单击命令按钮“下一步”可以访问页面的下一步，并且只有在所有字段都有效（在服务器上验证）时才能启用。

问题是用户将输入有效的字段改成无效输入后直接点击“下一步”按钮，并没有失去对该字段的关注，导致验证没有及时触发，以防止用户进入下一步。

这是其中一个字段的示例，以及执行提交的命令按钮。

<p:inputTextarea id="lineFreeText" value="#{line.freeText}" rows="1" disabled="#{facesContext.validationFailed and component.valid}"
    maxlength="#{itemConstant.MAX_FREE_TEXT_LENGTH}" counter="freeTextCounter"
    counterTemplate="{0}/#{itemConstant.MAX_FREE_TEXT_LENGTH}" rendered="#{showFreeText and !line.hasItemForm()}" validator="freeTextValidator" validatorMessage="#{messages.freeTextRequired}" requiredMessage="#{messages.freeTextRequired}">
        <p:ajax event="change" process="@this" listener="#{cartController.saveLine(line)}" update="@form cartForm lineFreeText lineEditedSymbols lineFreeTextMessage @([id$=nextStepBtn])" />
</p:inputTextarea>

     <h:commandButton value="#{messages['checkout.nextStep']}" id="nextStepBtn"  rendered="#{cartController.size() gt 0 and !clientContext.OCIRequest}"
        onclick="$('.jqRealNextStepButton').click();" style="border: 2px solid #008091; padding: 0.5em;"
        styleClass="ju-button" disabled="#{clientContext.client.visitor or checkoutDeliveryDateController.disableNextButton() or totalMinAmountNotMet or facesContext.validationFailed or not facesContext.postback}"
        title="#{clientContext.client.visitor ? messages.disabledForVisitor : tooltip}">
            <f:ajax execute="@this" />
    </h:commandButton>

我希望命令按钮在正在进行 ajax 时取消提交，以便验证可以在提交表单之前完成，使我能够防止用户输入无效数据并继续。有没有简单的方法可以做到这一点？

干杯

Answer 1

解决方案是将命令按钮更改为 primefaces 按钮，并删除指向另一个命令链接的 onclick，该命令链接执行后端逻辑以遍历到下一页。当我将操作方法放入 <p:commandbutton/> 时，ajax 事件已正确排队。

如何在进行 AJAX-call 时 prevent/stop 提交命令按钮

How to prevent/stop submit of commandbutton when having on going AJAX-call

jsf

primefaces