Question

A quick background : I have put a captcha using the primefaces custom component on my website. People in charge don’t like it as it is too difficult to use and clients are/were complaining. I decided I wanted to create a simple component (ie: 4 + 9 = and user inputs the answer) to avoid a bit of spam. No need to have an image display the question, just using simple text. This got me looking into custom components and composite component ( from this article and this one ).

Now, the question is not so much about a makeshift basic “captcha style validation”. It’s more about a composite component and backing bean combo.

What I would do is create a backing bean in this style :

<cc:interface>

    <cc:attribute name="label" />
<!-- edited -->
    <cc:attribute name="required" />
<cc:attribute name="ident" />

</cc:interface>


<cc:implementation>

    <h:panelGrid columns="3">
        <h:outputText value="#{captcha.text}"/>
        <h:inputText id="#{cc.attrs.ident}" value="#{captcha.entered}" validator="#{captcha.validate}" required="#{cc.attrs.required eq 'true'}" label="#{cc.attrs.label}" />
        <h:message for="captchaAnswer" />
    </h:panelGrid>

    <h:inputHidden value="#{captcha.value}" />

</cc:implementation>

And then I’d like to use this component in this manner :

<h:form>
    ...
    <tr>
        <td>
            <my:captcha label="Captcha" ident="captcha" required="true"/> <!-- added after suggested comment -->
            <br/>
            <h:message for="captcha" class="error"/>
        </td>
    </tr>
    <tr>
        <td colspan="3" class="center">
            <h:commandButton class="button" value="#{msg['contact.label.send']}" action="#{contact.send}" >
        </h:commandButton>
        </td>
    </tr>
    ...
</h:form>

How can I make sure that on submit I can check that my {#captcha.entered} value is the required value and if not returns a validation message on the form and prevents it from being submitted?

captcha backing bean would be simple and have values : text, answer, and, entered and a simple function to check if answer == entered.

EDIT : (Attempt #1)
custom validator would look as follow

public void validate(FacesContext context, UIComponent toValidate, Object value) {

    System.out.println("validating");

    String input = (String) value;

    //check to see if input is an integer
    //if not we know right away that the value is not good
    if(StringUtils.isNumeric(input)) {
        //if the input is numeric, convert to an integer
        int intValue = new Integer(input).intValue();
        if (intValue != answer) {
            ((UIInput) toValidate).setValid(false);

            FacesMessage message = new FacesMessage("Not a match!!");
            context.addMessage(toValidate.getClientId(context), message);
        }
    }
}

In this instance the validator does not even get called and I don’t get an error message.

Edit #2

After a bit of working and hints from comments I got this working. To get the h:message working I needed to add the attribute ident instead of id. If not I had to reference it as so : <h:message for="captcha:captcha" /> which was not the desired outcome.

Answer 1

The primary issue with this question was that I couldn’t get a reference.

By adding the attribute ident instead of id I got this to work. Please refer to edit #2 in question.