CODEWITHSUNDEEP
jsfrichfacesomnifaces
Mashrur
Mashrur

Reputation: 535

omnifaces highlight component is not working with richfaces 4 bean validation

I have the maven dependency for omnifaces for version 1.11 (as my target is JDK 1.6). Richfaces 4.5.6 final, myfaces 2.2.8. And, against a viewscoped bean I have got this xhtml:

<ui:define name="content">

        <f:loadBundle basename="au.com.erb.facility.ui.facility"
            var="property" />
        <o:highlight styleClass="error" />
        <h:panelGrid columns="2">
            <rich:validator event="change">
                <o:outputLabel value="#{property.absClientNumber}" for="input1" />
                <h:inputText id="input1"
                    value="#{facilityBean.facilityForEdit.alternateKey.absClientNumber}"
                    label="ABS Client Number" />

                <o:outputLabel value="#{property.facilityid}" />
                <h:inputText
                    value="#{facilityBean.facilityForEdit.alternateKey.facilityId}"
                    label="Facility Id" />

                <h:outputLabel value="#{property.rfsAccountGroup}" />
                <h:inputText value="#{facilityBean.facilityForEdit.rfsAccountGroup}"
                    label="RFS Account Group" />

                <h:outputLabel value="#{property.rfsAcctCustomerNumber}" />
                <h:inputText
                    value="#{facilityBean.facilityForEdit.rfsAcctCustomerNumber}"
                    label="RFS Account Customer Number" />

                <h:outputLabel value="#{property.rfsAcctLedger}" />
                <h:inputText value="#{facilityBean.facilityForEdit.rfsAcctLedger}"
                    label="RFS Account Ledger" />
            </rich:validator>

        </h:panelGrid>

    </ui:define>
    <!-- Buttons that performs actions on a selected record -->
    <!-- or navigate to a relevant screen -->
    <ui:define name="buttons">
        <h:commandButton id="submitButton" value="#{property.submitLabel}"
            action="#{facilityBean.save}" styleClass="wideButton"
            onclick="#{rich:component('progressWaitModalPanel')}.show()" />
        <h:commandButton id="closeButton" value="#{property.closeLabel}"
            action="#{facilityBean.close}" styleClass="wideButton"
            immediate="true" />

        <rich:popupPanel id="progressWaitModalPanel" modal="true">
            <f:facet name="header">
                <h:outputText value="Processing your request ...." />
            </f:facet>
            <h:panelGrid columns="1"
                style="width: 100%; border-width: 0px; text-align: center;">
                <h:outputText value="Please wait..." styleClass="dataValueStyle" />
            </h:panelGrid>
        </rich:popupPanel>
    </ui:define>

The result is nothing. No higlight. No clue what's going on. Have I missed any installation step? I have the css and xmlnamespace in place. Anything else?

I tried to add required="true" as it was shown in the example, but that did not work either. Not sure whether it is due to richfaces bean validation issue.

Upvotes: 1

Views: 176

Answers (1)

BalusC
BalusC

Reputation: 1109222

The <o:highlight> works server side, based on a.o. UIInput#isValid() in JSF component tree. The <rich:validator> works client side and doesn't manipulate JSF component tree.

This indeed doesn't go well together.

I briefly looked into the HTML/JS code of the <rich:validator> showcase and it appears that they don't add a marker style class to the input elements when it's invalid (e.g. PrimeFaces does), so it's going to be hard to write a workaround when continuing the <rich:validator> approach.

You've basically following options:

  1. Maunally write an oncomplete script which finds the validation error messages and then finds the associated inputs and then set the desired marker style class on it.

  2. Report an issue to RichFaces guys and ask them to add a marker style class to invalid inputs via <rich:validator>, so you could style them individually.

  3. Drop <rich:validator> and replace it by server side validation via <f:ajax>.

Upvotes: 2

Related Questions