javascript - JSF ajax request is not fired when combined with JS client-side validation

Question

I'm using JSF 2.0 and primefaces. I have one page with several inputs inside a form and a button that adds a new record to a table using ajax. Everything works ok. Then I added client side validation using JavaScript. This is the code of the command button:

<p:commandButton value="Add" actionListener="#{reqAbsences.addPreLeaveDemand}"
                 onclick="return validateNewAbs()"
                 update="tableForm inputForm errorForm" />

If validation fails, it works as expected and the record is not added no the table. The problem comes up when validation is passed: the record is addded, but the page is reloaded (ajax not working). if I remove the onclick="return validateNewAbs()" ajax works again.

Any idea why this happens?

Answer 1

You're overriding the default ajax click event by immediately returning true. Rather make it to return only on false.

onclick="if (!validateNewAbs()) return false;"

Better is however to just do the validation on the server side using JSF builtin/custom validators. This way you don't need to duplicate validation into the both sides and the validation will still work with JS disabled.