JQuery Validation() with JSF and Page Submit Refresh

Question

I just finished integrating JQuery Validation script with my JSF 2 page. It works fine till we reach the submission of the form.

I have found very close answer here but the problem persists : the page gets refreshed and the bean is not invoked ! Also this answer is helpful but using it the bean is never invoked too.

Here is my validation :

<script>
$(document).ready(function(){

$("#ForgotPass").validate({

    rules: {
        'ForgotPass:mailprofile': {
            email: true,
            required : true
            }
        },
        messages: {
            'ForgotPass:mailprofile': {
         email: "Veuillez entrer une adresse e-mail valide",
         required : "L'adresse e-mail est vide"
            }
          }

    });
});
</script>

And the form :

<h:form id="ForgotPass" class="form floating-label">
  <h:outputText id="Mailid" value="E-mail : " name="Mailnm"> </h:outputText>
  <h:inputText class="form-control" id="mailprofile" value="#{userloginMB.mailprofile}" ></h:inputText>
  <h:outputLabel id="MailidL" for="mailprofile" name="MailnmL"></h:outputLabel>
  <h:commandButton id="btnPo" value="Soumettre" onclick="validate()">
    <f:ajax listener="#{userloginMB.forgotpass}" execute="@form" render="@form" onevent="validate()" />
  </h:commandButton>                                            
</h:form>

How to submit the form in case validation is correct, with invoking the bean, and without page refresh ? The validation is correctly working when field is invalid.

Note : My rendered in browser button :

<input id="ForgotPass:btnPo" name="ForgotPass:btnPo" value="Soumettre" class="btn btn-flat btn-primary ink-reaction" onclick="mojarra.ab(this,event,'action','@form','@form');return false" type="submit">

Added : Something like would be perfect : http://jsfiddle.net/wYd5t/2/ but how can I do it in my example ? (Or even using addEventListener)

Thank you but invoking the bean in each keypress to do the correct validation won't be good no ? — Chaibi Alaa, Oct 01 '15 at 16:08

score 1 · Accepted Answer · answered Oct 03 '15 at 15:54

You should really do a double validation, server-side (usually simple message regrouping errors) and a client-side one. Doing the connexion between both will make any of both unusable if the other stops (JS disabled browser).

JQuery Validation() with JSF and Page Submit Refresh

1 Answers1