如何在 Primefaces 文件上传的 onchange 上捕获 error/validation 错误

Question

我正在使用 passthrough 将 onchange 传递给 PF 文件上传组件。我想在用户选择文件时折叠一个面板并展开另一个面板。

我的问题是我总是折叠和展开面板。我不想这样做以防发生错误。错误的是，我的意思是如果我添加了不受支持的文件类型。如果我这样做，将显示 PF 错误消息，但 onchange 中的内容也会被调用。

我尝试使用 args 但这不适用于 passthrough...

我如何检查这些特定错误并仅在 onchange 中没有错误时才执行？或者我能以某种方式抓住它们吗？

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if (tagName == 'INPUT' &amp;&amp; #{!cc.attrs.isLogo}) { if (!!value) {PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand();} }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

更新：

我什至尝试获取 DOM 元素，其中消息按 class 名称存储，例如 console.log($(PrimeFaces.escapeClientId('#{cc.clientId}:addPanel')).find('.ui-messages-error-summary'));

这也没有成功，使用onchange方法时没有找到任何东西，但后来通过手动运行在浏览器控制台中找到上述语句。似乎 onchange 在 PF 修改标记之前执行。或者至少不是所有标记...

有什么建议吗？

Answer 1

所以，我正在回答我自己的问题。工作代码如下所示：

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    widgetVar="#{clientId}_documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

基本上我更改的是 passthrough 行，现在看起来像这样：

pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }"

它基本上只过滤掉具有 id 的 DIV 元素，因为我看到该文件仅附加到 DOM 中的一个元素并通过使用 widgetvar 和条件 if(!!PF('#{clientId}_documentUpload').files.length) 它基本上有效。

我不知道这样做是不是最好的或正确的方法，但正如我所说，它可以完成工作。

如何在 Primefaces 文件上传的 onchange 上捕获 error/validation 错误

How to catch error/validation error on onchange for Primefaces fileupload

jsf

file-upload

primefaces

jsf-2