用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> ，這是無效的。 確保您不嵌套JSF <h:form>組件。 對於其他原因，另請參見未調用commandButton / commandLink / ajax操作/偵聽器方法或未更新輸入值 。

---

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文件中，該文件由<h:head>的<script>和<link>包括。