Executing javascript function before message that a value is required is shown
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.
Fi开发者_如何学编程rst 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" />
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
.
精彩评论