我使用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>
当值为空时,错误消息应显示在对话框中。
答案 0 :(得分:0)
当您使用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);
}
}