OmniFaces Showcase

<h:form>
    <h3>Please fill out the same value for all of those fields.</h3>
    <o:validateEqual id="equal" components="foo bar baz" />

    <h:panelGrid columns="3">
        <o:outputLabel for="foo" value="Foo" />
        <h:inputText id="foo" />
        <h:message for="foo" />

        <o:outputLabel for="bar" value="Bar" />
        <h:inputText id="bar" />
        <h:message for="bar" />

        <o:outputLabel for="baz" value="Baz" />
        <h:inputText id="baz" />
        <h:message for="baz" />

        <h:panelGroup />
        <h:commandButton value="submit">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h:panelGroup>
            <h:message for="equal" />
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>

<hr />

<h:form>
    <h3>Please enter the same password.</h3>

    <h:panelGrid columns="3">
        <h:outputLabel for="password" value="Enter password" />
        <h:inputSecret id="password" redisplay="true" required="true" requiredMessage="Please enter password" />
        <h:panelGroup>
            <h:message for="password" />
        </h:panelGroup>
        
        <h:outputLabel for="confirm" value="Confirm password" />
        <h:inputSecret id="confirm" redisplay="true" required="true" requiredMessage="Please confirm password" />
        <h:panelGroup>
            <h:message for="confirm" />
            <o:validateEqual id="equal" components="password confirm"
                message="Passwords are not equal" showMessageFor="password" />
        </h:panelGroup>

        <h:panelGroup />
        <h:commandButton value="submit">
            <f:ajax execute="@form" render="@form" />
        </h:commandButton>
        <h:panelGroup>
            <h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
        </h:panelGroup>
    </h:panelGrid>
</h:form>