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.