在<p:messages>中显示<p:fileUpload>验证错误

Question

我有一个隐藏的<p:fileUpload>,通过打开<h:outputLabel>.

<p:messages id="message" autoUpdate="true" />

<h:form id="form">

    <p:fileUpload id="file-input" auto="true"
        allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="10"
        invalidSizeMessage="wrong size" fileUploadListener="#{bean.image}"
        update="@form message" style="display: none;"
        invalidFileMessage="wrong file" />

    <h:outputLabel for="file-input_input">
        <h:graphicImage name="images/dummy.jpg" />
     </h:outputLabel>

    <h:outputText value="#{bean.file.fileName}" />
    <br />
    <h:outputText value="#{bean.file.size}" />
</h:form>

不幸的是,验证失败后没有显示任何消息(例如无效的大小或无效的文件).这些消息显示在<p:fileUpload>内容框内而不是内容框中<p:messages>.

如何在内部<p:messages>而不是在内部显示这些消息<p:fileUpload>？

Answer 1

验证在客户端完全执行,无需访问服务器.所以你无法从服务器端控制它.

<p:fileUpload>可以通过messageContainerwidget变量的属性获得消息容器.简单的让jQuery <p:messages>在点击标签时将其移动到:

<p:messages id="messages" ... />

<h:form>
    <p:fileUpload id="file-input" widgetVar="file-input" ... 
        styleClass="ui-helper-hidden" />
    ...
    <h:outputLabel for="file-input_input" ...
        onclick="PF('file-input').messageContainer.appendTo($('#messages'));" />
</h:form>

(我只是重命名<p:message id>为更明智,并使用PrimeFaces特定类隐藏它而不是内联样式)

在onstart和oncomplete属性<p:fileUpload>当客户端验证已通过,他们只是执行,文件上传请求实际发送均无法使用.