Need to integrate jQuery validation plugin with jsf

Question

I have been trying to do client validation using jQuery validation plugin with a form built with jsf.I need client validation basically to help reduce the number of request/response round trips between server and browsers for obvious reasons. i know that jsf "h:commandlink" tag is not like a regular submit button,like the "h:commandButton" which i have gotten to work successfully with JQuery form validation with the code below:

    <script type = "text/javascript">

        $(document).ready(function(){

            $("#form").validate({
                rules: {
                    "form:staffno": {
                        required: true


                    }        
                }
            });


        });
    </script>

                    <h:body>
                    <h:form id="form">
                    <h:inputText id="staffno"  value="#" required="true"/>
                    <h:commandButton id="save" value="SAVE" action="#"/> //renders a html submit button type
                    </h:form>
                    </body>

I noticed from the page source that h:commandLink uses some kind of javascript function, so i tried to tweak the above to get the same effect as shown below:

                  <script type="text/javascript">

                    $(document).ready(function(){
                        $("#form").validate({
                            rules: {
                                "form:staffno": {
                                    required: true


                                }        
                            }
                        });

                        $("#form\\:save").click(function(){ 
                            if($("#form").valid()){
                               //cannot use regular $("#form").submitt()
                               // really can't figure what to use here
                            }
                            else{
                                return false;
                            }

                        });       


                    });  
                </script>

In my tweaking spree, i was able to get the JQuery validation plugin behaviour,but only for a short while , because the form still gets submitted, even if the field is empty. I kind of like figured that two onclicks are called, one, in jquery and another in jsf.I still can't figure how to get it right. I will need help to get this client validation working correctly with JQuery and jsf h:commandLink. Thanks

if you want to stop form submiting you can do onclick="if(someFunc()===false{return false;})" — Daniel, Sep 06 '12 at 10:52
there already is an onclick() defined by jsf in the link. Is it ok to put another onclick() in addition to the first one — khare, Sep 06 '12 at 10:57
its not another one , i guess it will prepend the value in onclick that you already see , the onclick attribute exists so you can use it... — Daniel, Sep 06 '12 at 11:01
somefunction() is javascript.how does the onclick work with Jquery so that i can take advantage with plugin functionality — khare, Sep 06 '12 at 11:23
not familiar with that plugin, but in general i guess you can call $("#form").valid() check in the js function and return its value , if its false just return false in the onclick — Daniel, Sep 06 '12 at 11:26
sure you do :) , onclick= " if($('#form').valid() == false{return false;})" , you cant use " inside ""... — Daniel, Sep 06 '12 at 11:40
thanks.its working kind of. if press the link i get the functionality i am looking for. After this the functionality just pops off and on with every letter entry/removal and without the link being clicked. which is........ not exactly what i wanted,howver i guess this will do for now thanks — khare, Sep 06 '12 at 11:50

score 0 · Answer 1 · answered Sep 06 '12 at 11:50

Just return true if the form is valid. You can even just delegate straight to valid() function.

$("#form\\:save").click(function(){ 
    return $("#form").valid();
});

You can indeed not use $("#form").submit(), because this way the name=value pair of the HTML <input type="submit"> representation of the command button won't be sent as a request parameter and hence JSF won't be able to identify the command button action which needs to be invoked.

score -1 · Answer 2 · edited Aug 23 '14 at 08:56

<script type="text/javascript">
$(document).ready(function(){
   $("#form").validate({
      rules: {
         "form:staffno": {
            required: true
         }        
      }
   });
   $("#form\\:save").click(function(){ 
      return $("#form").valid();
   });
</script>
<body>
   <h:form id="form">
   <h:inputText id="staffno"  value="#" required="true"/>
   <!-- renders a html submit button type -->
   <h:commandButton id="save" value="SAVE" action="#"/> 
   </h:form>
</body>

script not work properly when i use it in .xhtml file ................................................................................ If tags have a "type" attribute, it should equal "text/javascript" or "application/javascript". Also scripts must be parsable (syntactically correct).

You can omit the `type` attribute, browsers already assume this is JavaScript code. — bfontaine, Aug 23 '14 at 09:10

Need to integrate jQuery validation plugin with jsf

2 Answers2

Linked