需要将 jQuery 验证插件与 jsf 集成
Posted
技术标签:
【中文标题】需要将 jQuery 验证插件与 jsf 集成【英文标题】：Need to integrate jQuery validation plugin with 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()===falsereturn false;)" 链接中已经有一个由jsf定义的onclick()。除了第一个 onclick() 可以再放一个吗 它不是另一个，我猜它会在你已经看到的 onclick 中添加值，onclick 属性存在所以你可以使用它... somefunction() 是 javascript.onclick 如何与 Jquery 一起使用，以便我可以利用插件功能 谢谢。它的工作方式。如果按链接，我会得到我正在寻找的功能。在此之后，该功能会随着每个字母输入/删除而弹出和打开，而无需单击链接。这是........不完全是我想要的，但我想现在这会做谢谢 【参考方案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代码。以上是关于需要将 jQuery 验证插件与 jsf 集成的主要内容，如果未能解决你的问题，请参考以下文章
jQuery学习jQuery插件的使用与写法（表单验证插件-validation）
jQuery 密码验证和深入理解JSONP前端jQuery框架