Question

我使用inputText，commandButton和uploadFile组件。在commandButton中，我使用了ajax = false并在两个字段中都使用了required = true。单击带有空值的保存时，对话框中的错误消息不会显示，对话框将关闭。但在控制台中，警告消息显示为“消息已呈现但未显示”。

以下是我的代码：

<p:dialog widgetVar="addDialogWidgetVar" id="addDialogWidgetVarId"  dynamic="true" >

            <table  style="width: 100%;">
                    <tr>
                        <td>
                            <p:messages for="errorMsgId" id="errorMsgId" autoUpdate="true" showDetail="false" showSummary="true" closable="true"/>
                        </td>
                    </tr>
                </table>

            <h:form id="formId" enctype="multipart/form-data">



                <table>
                    <tr>
                        <td>
                            <label style="margin-top: 5%"><h:outputText value="Name:"/><h:outputText value="*" style="color:red"/></label>
                        </td>
                        <td width="10%"/>
                        <td>
                            <p:inputText value="#{manageBean.attachment.fileName}" id="fileNameId" maxlength="60" style="width:70"
                                        required="#{not empty param[save.clientId]}" requiredMessage="Please enter Attachment name"></p:inputText>
                        </td>
                    </tr>
                    <tr height="10"></tr>
                    <tr>
                        <td>
                            <label style="margin-top: 5%"><h:outputText value="Upload Attachment:"/><h:outputText value="*" style="color:red"/></label>
                        </td>
                        <td width="10%"/>
                        <td>
                            <p:fileUpload label="Select a file" mode="simple" value="#{manageBean.attachment.file}"
                                        allowTypes="/(\.|\/)(pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG)$/"
                                        invalidFileMessage="Allow only (pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG) file."
                                        multiple="false" required="#{not empty param[save.clientId]}" requiredMessage="Please select a file" >
                            </p:fileUpload>

                        </td>
                    </tr>
                    </table>
                    <br />
                    <table style="margin-left: 30%;">                           
                    <tr align="center">

                        <td>
                            <p:commandButton value="Close" actionListener="#{manageBean.cancelAttachment}" oncomplete="addDialogWidgetVar.hide()" />
                        </td>

                        <td> 
                            <p:commandButton id="submitbtnid" value="Save" ajax="false" binding="#{save}"
                                        actionListener="#{manageBean.saveAttachment}" update=":errorMsgId"/>
                        </td>
                    </tr>
                </table>

            </h:form>

        </p:dialog>

当值为空时，错误消息应显示在对话框中。

Answer 1

当您使用ajax=false时，这是预期的行为，因为在提交整个页面时会刷新，这就是对话框关闭的原因。

此外，在您的p:messages组件中，您不应该指向for的{{1}}属性。在errorMsgId中，您应该输入您想要显示消息的输入字段的ID。例如，如果您放置for，则在您输入文件名时会显示错误。但是，如果您没有formId:fileNameId，则会显示所有消息。

您不需要for，因为您已经放置了update=":errorMsgId"。

现在，为了完成您的需要，并使用autoUpdate="true"显示消息而不关闭对话框，有以下解决方法：

JSF（在定义保存按钮的位置）： *稍后重新定义保存按钮

ajax=false

和JavaScript功能：

<p:commandButton id="submitbtnid" **style="display:none"** ajax="false" binding="#{save}" actionListener="#{manageBean.saveAttachment}" />
<p:commandButton value="Save" oncomplete="checkIfValid(xhr, status, args)" />

因此，这里是可见按钮，它使用ajax并调用JS方法来检查验证是否失败。并且只有在所有验证条件通过后，它才会单击实际提交表单的隐藏按钮。

<强>更新

对于fileUpload输入，应该进行额外检查。通过这种方式，您可以从fileUpload组件中删除allowTypes所需的属性，并将其添加为id - 所有验证都将在JavaScript函数中。

这是你的fileUpload组件：

function checkIfValid(xhr, status, args)
  {
      if (!args.validationFailed)
      {
          $("#formId\\:submitbtnid").click();
      }
  }

您还应该在表单中添加hiddenInput（以及bean中的messageHidden字段）：

<p:fileUpload label="Select a file" mode="simple" value="#{manageBean.attachment.file}" multiple="false"></p:fileUpload>

现在，这是执行文件输入验证的JavaScript函数：

<h:inputHidden id="errorMsg" value="#{manageBean.messageHidden}"/>

首先检查文件是否被选中，然后检查其扩展名，然后是允许文件的最大大小。如果某些内容无效，则会为隐藏的输入字段设置新值。

现在，在你的bean中，你应该检查文件验证是否正常：

function checkFileInput() {
                if ($("#formId\\:fileInput")[0].files.length == 0) {
                    $("#formId\\:errorMsg").val("Please select a file");
                    return;
                }
                var validExtensions = ['pdf','doc','docx','xls','xlsx','gif','png','jpg','jpeg'];
                var maxFileSize = 5000;

                var ext = $('#formId\\:fileInput').val().split('.').pop().toLowerCase();
                if($.inArray(ext, validExtensions) == -1) {
                    $("#formId\\:errorMsg").val("Allow only (pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG) file.");
                    return;
                }

                if ($("#formId\\:fileInput")[0].files[0].size > maxFileSize) {
                    $("#formId\\:errorMsg").val("File is to big");
                    return;
                }
                $("#formId\\:errorMsg").val("");
            }

如果没有，则验证失败将被设置为上下文，并且将添加来自inputHidden的消息。

最后，你应该更改Save按钮，先用JS检查文件输入，然后用bean方法验证，然后检查验证是否失败：

public void validateFile() {
        if(!messageHidden.trim().equals("")) {
            FacesContext.getCurrentInstance().validationFailed();

            FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, messageHidden, messageHidden);
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

如何在主题中单击ajax = false的命令按钮时在对话框中显示消息

1 个答案: