显示< p：fileUpload>内部验证错误< p：消息> [英] Display <p:fileUpload> validation errors inside <p:messages>

问题描述

隐藏的< p：fileUpload> 通过< h：outputLabel> 打开。

 < p：messages id =messageautoUpdate =true/> 
 
< h：form id =form> 
 
  allowTypes =/（\。| \ /）（gif | jpe？g | png ）$ /sizeLimit =10
 invalidSizeMessage =大小错误fileUploadListener =＃{bean.image}
 update =@ form messagestyle =display：none; 
 invalidFileMessage =错误的文件/> 
 
< h：outputLabel for =file-input_input> 
 < / h：outputLabel> 
 
< h：outputText value =＃{bean.file.fileName}/> 
< br /> 
< h：outputText value =＃{bean.file.size}/> 
< / h：表格> 
  

不幸的是，验证失败后（例如，无效的文件大小或无效文件），不会显示任何消息。这些消息显示在< p：fileUpload> 内容框中，而不是在< p：messages> 中。如何在< p：messages> 内显示这些消息，而不是在$ <号码：文件上传> ？

解决方案

验证完全在客户端执行，不会触及服务器。所以你不能从服务器端控制这个。
$ b

< p：fileUpload> 的消息容器可以通过 messageContainer 小部件变量的属性。简单的让jQuery将它移动到< p：messages> 中，当点击标签时：

 < p：messages id =messages... /> 
 
< h：form> 
  styleClass =ui-helper-hidden/> 
 ... 
< h：outputLabel for =file-input_input... 
 onclick =PF（'file-input'）。messageContainer.appendTo（$（'消息））; /> 
< / h：表格> 
  

（我只更名为< p：message id>


onstart 更明智，使用PrimeFaces特定的类来隐藏它，而不是内联样式。 < p：fileUpload> 的$ c>和 oncomplete 属性不可用，因为它们仅在客户端验证已通过，文件上传请求实际上已发送。

I have a hidden <p:fileUpload> which is opened via <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>

Unfortunately, no messages are displayed after validation failed (e.g invalid size or invalid file). Those messages are displayed inside the <p:fileUpload> content box instead of in <p:messages>.

How can I display those messages inside <p:messages> instead of inside <p:fileUpload>?

解决方案

The validation is performed fully client side without hitting the server. So you can't control this from server side on.

The message container of the <p:fileUpload> is available via messageContainer property of the widget variable. Simple let jQuery move it into the <p:messages> when clicking the label:

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

(I only renamed <p:message id> to be more sensible, and used a PrimeFaces specific class to hide it instead of an inline style)

The onstart and oncomplete attributes of <p:fileUpload> weren't usable as they are only executed when the client side validation has passed and the file upload request is actually sent.

这篇关于显示< p：fileUpload>内部验证错误< p：消息>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！