Take the 2-minute tour ×

I have a short question that has been bothering for last few hours:

How can I execute a javascript function before message that a value is required is shown? (on form submit some value inside of it is empty when it needs to be entere).

I have faced this problem while using RealPerson captcha plugin for jQuery in my jsp page. When I click on submit button with input field for captcha empty, the captcha disappears.

Update 1:

I tried with binding and rendered but the problem still seems to be there.

<h:outputLabel for="captcha" value="#{ui.pleaseEnterTextInTheImage}"  rendered="#{sessionBean.showCaptcha}"/>
<h:panelGroup rendered="#{sessionBean.showCaptcha}">
     <h:inputText id="captcha" styleClass="captcha" binding="#{captcha}"
                                                     validator="#{validationBean.captchaValidator}" required="true"/>
     <h:outputText value=" "/><h:message for="captcha" styleClass="captchaMsg"/>
<h:panelGroup rendered="#{!captcha.valid}">
     <script>alert('Foo input is invalid!');</script>

Update 2:

When page goes live:


After I click "Register" with captcha entry left blank: after

Update 3:

jQuery code that I use.

First on pageload, I assign the captcha to the field:

$(function() {

Then, after I reassign a new captcha after the field gets rerendered by calling this function from my bean:

function updateCaptchaFromBean() {
    $(function() {

Found solution

I've found a simple javascript trick to solve this with onclick():

<h:commandButton styleClass="buttonSubmit" value="#{ui.registerBUTTON}"
     onclick="if ($('.captcha').val() == '') return false"
     id="submitBtn" />
share|improve this question
JSP? So may I assume that you're still on JSF 1.x? –  BalusC Jun 15 '11 at 15:14
I am quite new to it. I am using JSF 2.0, at least partially. I was under impression that it also uses JSP... Please correct me if you have time. –  Hollgam Jun 15 '11 at 15:43
Are you really using JSF 2.0 on *.jsp pages? Or are you using *.xhtml pages (which is actually Facelets, the successor of JSP and the default view technology of JSF 2.x). Anyway, my answer should also work out for Facelets, but better is to use <ui:fragment> instead of <h:panelGroup>. –  BalusC Jun 15 '11 at 15:47
By the way, how about your previous question? stackoverflow.com/questions/6271579/… This gives me the impression that you're actually using JSF 1.x. Or at least JSF 2.x in JSF 1.x modus because the faces-config.xml is incorrectly been declared conform JSF 1.x instead of JSF 2.x. What book/tutorials were you using? Do they cover JSF 2.x? –  BalusC Jun 15 '11 at 15:51
I am making a project for a company, which is my first attempt to use that technology and I started it using a base that I was given, which was written in JSF 1.2. Basically, its mostly JSF 1.2 as I understand. –  Hollgam Jun 15 '11 at 15:55

1 Answer 1

Assuming JSF 1.x on JSP without ajax fanciness, here's how you could do it at its simplest:

<h:panelGroup rendered="#{!foo.valid}">
<h:inputText id="foo" binding="#{foo}" value="#{bean.foo}" required="true" />
<h:message id="fooMessage" for="foo" />

Update as per the comments, it doesn't work. As per your updated question you seem to be using a custom validator. This problem can only mean that you didn't throw a ValidatorException in your custom input validator, but just added a message. This is wrong. You should be throwing a ValidatorException so that JSF can mark the component invalid.

So, you shouldn't be doing the following in the validator method:

context.addMessage(component.getClientId(context), new FacesMessage("Fail"));

but you should rather do

throw new ValidatorException(new FacesMessage("Fail"));

this way the #{!captcha.valid} will resolve as true.

share|improve this answer
Thanks a lot for your help but seems like it still doesn't work. I've tried adding a binding to it but no luck. –  Hollgam Jun 15 '11 at 15:49
Are you using JSF 2.0 <f:ajax>? Ensure that you also render the portion containing the panelgroup. –  BalusC Jun 15 '11 at 15:50
No, I was not using '<f:ajax>'. How can I use it in my situation. I have posted a code of a peace of view that I am working with. Sorry, for my little understanding of things in this area, I am still trying to learn it. I would appreciate it a lot if you could give me a hint on how to use it with it. –  Hollgam Jun 15 '11 at 15:58
Likely you didn't throw ValidatorException in your validator. See answer update. –  BalusC Jun 15 '11 at 16:10
My problem is that when it goes to captchaValidator(), everything works fine because I am able to call a js function, which makes sure that the captcha element is rendered properly, but in the case when this input is left empty and required="true" makes an error show up, the input gets rerendered and the captcha goes away. –  Hollgam Jun 15 '11 at 16:10

Your Answer


