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

Question

I want to validate, before submitting the form, if the h:selectOneMenu and t:inputFileUpload have a valid value. I have this code but it does not show the h:message when I leave the selectOneMenu, the same thing happens with 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>

and also, is there a way to prevent the form to be submitted if the previous components don't have valid values?

Cheers !

I'm using Mojarra 2.1.4 and Tomahawk 1.1.11 (for upload)

Answer 1

it does not show the h:message when I leave the selectOneMenu

The code which is posted so far looks fine. The problem is caused elsewhere. Perhaps you're nesting HTML <form> s, which is invalid. Make sure that you don't nest JSF <h:form> components. For other causes, see also commandButton/commandLink/ajax action/listener method not invoked or input value not updated .

---

the same thing happens with t:fileInputUpload .

Unfortunately, the HTML4 <input type="file"> element and XHR1 ajax don't play very well together. Determining whether a file is selected requires a multipart/form-data ajax request, which is only supported in HTML5/XHR2 (as far now, PrimeFaces 3.0 is the only JSF component library which supports this -in theory! I haven't tested it). So the ajax validation request is totally ignored by <t:inputFileUpload> . Since JSF/Tomahawk is just a HTML code generator, it can't do any much for you here. Best what you can do is to validate it by plain vanilla 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>

(the <h:message> is kept in place so that the server side validation message will be shown anyway whenever you press the command button -which fires a synchronous (non-ajax) request)

---

Unrelated to the concrete problem, you should prefer putting JS and CSS code in its own .js and .css files which you include by <script> and <link> in <h:head> .