需要将jQuery验证插件与jsf集成 [英] Need to integrate jQuery validation plugin with jsf

问题描述

我一直在尝试使用jQuery验证插件和jsf构建的表单进行客户端验证.出于明显的原因，我基本上需要客户端验证来帮助减少服务器和浏览器之间的请求/响应往返次数. 我知道jsf"h:commandlink"标记不像常规的提交按钮，就像我已经成功使用的"h:commandButton"一样 使用以下代码对JQuery表单进行验证:

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>

我从页面源中注意到，h:commandLink使用某种javascript函数，因此我尝试对上述内容进行调整以获得与以下所示相同的效果:

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>

通过大量的调整，我能够获得JQuery验证插件的行为，但只是一小段时间，因为即使字段为空，表单仍会提交.我有点像弄清楚两个onclicks被调用，一个在jquery中，另一个在 在jsf中，我仍然不知道如何正确处理它.我将需要帮助来使此客户端验证与JQuery和jsf h:commandLink一起正常工作.谢谢

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

推荐答案

如果表单有效，只需返回true.您甚至可以直接委派给valid()函数.

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

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

您确实不能使用$("#form").submit()，因为这样一来，命令按钮的HTML <input type="submit">表示形式的name = value对将不会作为请求参数发送，因此JSF将无法识别需要调用的命令按钮动作.

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.

这篇关于需要将jQuery验证插件与jsf集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！