Executing javascript function before message that a value is required is shown

Question

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>
<h:panelGroup rendered="#{!captcha.valid}">
     <script>alert('Foo input is invalid!');</script>
</h:panelGroup>

Update 2:

When page goes live:

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

Update 3:

jQuery code that I use.

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

$(function() {
      $('.captcha').realperson();
});

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

function updateCaptchaFromBean() {
    $(function() {
        $('.captcha').realperson();
    });
}

Found solution

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

<h:commandButton styleClass="buttonSubmit" value="#{ui.registerBUTTON}"
     action="#{register.addAction}"
     onclick="if ($('.captcha').val() == '') return false"
     id="submitBtn" />

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}">
    <script>alert('Foo input is invalid!');</script>
</h:panelGroup>
...
<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.