在 <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>的消息容器可以通过小部件变量的messageContainer属性获得。简单的让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特定的类来隐藏它，而不是内联样式)

<p:fileUpload>的onstart和oncomplete属性是不可用的，因为它们只有在客户端验证通过并且文件上传请求实际发送时才执行。