使用 f:ajax 模糊验证 h:selectOneMenu 和 t:inputFileUpload

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

到目前为止发布的代码看起来不错。问题是在其他地方引起的。也许您正在嵌套 HTML <form>s，这是无效的。确保您没有嵌套 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）请求） p>

---

与具体问题无关，您应该更喜欢将 JS 和 CSS 代码放在自己的 .js 和 .css 文件中，这些文件由 <script> 和 <link> 包含在 <h:head> 中.