Validate h:selectOneMenu and t:inputFileUpload with f:ajax blur

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)

You forgot to elaborate "it does not work" in more detail. – BalusC Nov 14 '11 at 16:52 — BalusC, Nov 14 '11 at 16:52
Sorry, I've updated the post now. – BRabbit27 Nov 14 '11 at 17:06 — BRabbit27, Nov 14 '11 at 17:06

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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>.

Oh yeah in fact I have some nested forms, it is because I have a **selectOneMenu ** that renders other components, so I thought I should have a form nested but I will check it and fix that. So there should be Just one form per page? — BRabbit27, Nov 14 '11 at 19:31
No, use one `` per form :) If you have for example a login form and a search form in the same page, each should have its own ``. You don't want to submit/validate the other form from one form. See also See also http://stackoverflow.com/questions/7371903/multiple-hform-in-a-jsf-page — BalusC, Nov 14 '11 at 19:33

Validate h:selectOneMenu and t:inputFileUpload with f:ajax blur

1 Answers1