需要将 jQuery 验证插件与 jsf 集成答案

【问题标题】：Need to integrate jQuery validation plugin with jsf需要将 jQuery 验证插件与 jsf 集成
【发布时间】：2012-08-31 04:09:36
【问题描述】：

我一直在尝试使用带有 jsf 构建的表单的 jQuery 验证插件进行客户端验证。出于显而易见的原因，我需要客户端验证来帮助减少服务器和浏览器之间的请求/响应往返次数。我知道 jsf“h:commandlink”标签不像普通的提交按钮，就像我已经成功使用的“h:commandButton” jQuery 表单验证代码如下：

    <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 函数，所以我尝试调整上面的内容以获得相同的效果，如下所示：

                  <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 验证插件的行为，但只是一小会儿，因为即使该字段为空，表单仍会被提交。我有点想知道调用了两个 onclick，一个在 jquery 中，另一个在 jquery 中在 jsf 中。我仍然不知道如何正确处理。我需要帮助才能使此客户端验证与 JQuery 和 jsf h:commandLink 一起正常工作。谢谢

【问题讨论】：

如果您想停止提交表单，您可以执行 onclick="if(someFunc()===false{return false;})"
链接中已经有一个由jsf定义的onclick()。除了第一个 onclick() 可以再放一个吗
它不是另一个，我猜它会在你已经看到的 onclick 中添加值，onclick 属性存在所以你可以使用它...
somefunction() 是 javascript.onclick 如何与 Jquery 一起使用，以便我可以利用插件功能
谢谢。它的工作方式。如果按链接，我会得到我正在寻找的功能。在此之后，该功能会随着每个字母输入/删除而弹出和打开，而无需单击链接。这是........不完全是我想要的，但我想现在这会做谢谢

标签： jquery validation jsf jquery-plugins jsf-2

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

<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>

当我在 .xhtml 文件中使用它时，脚本无法正常工作 ..................................................... ......................................... 如果标签有“type”属性，它应该等于“text/javascript”或“application/javascript”。脚本也必须是可解析的（语法正确）。

【讨论】：

你可以省略type属性，浏览器已经假定这是JavaScript代码。