Question

我想在提交表单之前验证 h：selectOneMenu 和 t：inputFileUpload 是否具有有效值。我有这个代码，但是当我离开selectOneMenu时它没有显示 h：message ，t：fileInputUpload也是如此。

            <h:form id="uploadForm" enctype="multipart/form-data">
                <h:panelGrid columns="3">
                    <h:outputLabel for="option" value="Operación:" />
                    <h:selectOneMenu id="option" value="#{menu.infoMenuItem}"
                                     required="true"
                                     converterMessage="Opción no valida !" >
                        <f:selectItem itemLabel="Seleccione una opcion..." itemValue="null"/>
                        <f:selectItems value="#{menu.infoMenuItems}" />
                        <f:ajax event="blur" render="optionMessage" />
                    </h:selectOneMenu>
                    <h:message id="optionMessage" for="option" style="color: #FF0000;" />

                    <h:outputLabel for="upfile" value="Archivo: " />
                    <t:inputFileUpload id="upfile" value="#{uploadFile.upFile}"
                                       required="true">
                        <f:ajax event="blur" render="uploadMessage" />
                    </t:inputFileUpload>
                    <h:message id="uploadMessage" for="upfile" style="color: #FF0000" />

                    <h:panelGroup />
                    <h:commandButton value="Continuar"
                                     action="#{uploadFile.upload}">
                    </h:commandButton>
                </h:panelGrid>
            </h:form>

并且，如果先前的组件没有有效值，是否有办法阻止提交表单？

干杯！

我正在使用Mojarra 2.1.4和Tomahawk 1.1.11（上传）

Answer 1

当我离开selectOneMenu时，它没有显示h：消息

到目前为止发布的代码看起来很好。问题是在其他地方引起的。也许你正在嵌套HTML <form>，这是无效的。确保不嵌套JSF <h:form>组件。有关其他原因，另请参阅commandButton/commandLink/ajax action/listener method not invoked or input value not updated。

同样的事情发生在t:fileInputUpload。

不幸的是，HTML4 <input type="file">元素和XHR1 ajax不能很好地结合在一起。确定是否选择了文件需要multipart/form-data ajax请求，该请求仅在HTML5 / XHR2中受支持（到目前为止，PrimeFaces 3.0是唯一支持此理论的JSF组件库！我还没有测试过它）。因此<t:inputFileUpload>完全忽略了ajax验证请求。由于JSF / Tomahawk只是一个HTML代码生成器，因此在这里对你无能为力。最好的办法是用普通的JS / HTML验证它。

<t:inputFileUpload id="upfile" value="#{bean.file}" required="true" 
    onblur="document.getElementById('uploadMessage').style.display = (!value) ? 'block' : 'none'"
/>
<h:panelGroup>
    <h:message for="uploadMessage" style="color: #FF0000" />
    <span id="uploadMessage" style="display: none; color: #FF0000">Seleccione una archivo...</span>
</h:panelGroup>

（<h:message>保留在原位，这样每当您按下命令按钮时，无论如何都会显示服务器端验证消息 - 它会触发同步（非ajax）请求

对于具体问题

无关，您应该更喜欢将JS和CSS代码放在.js和.css所包含的<script>和<link>文件中{1}}中的{1}}。

使用f：ajax blur验证h：selectOneMenu和t：inputFileUpload

1 个答案: