JQuery 验证引擎和 primefaces commandButton

Question

我目前在使用客户端验证时遇到一些问题。我正在使用 Jquery 验证引擎插件，但无法使其与 PrimeFaces commandButton 一起使用。 我认为问题在于 primefaces commandButton 不是像您使用的那样的普通提交按钮，现在我的问题是如何让它工作，以便当我单击客户端验证时触发，导致仅使用服务器端为了用户体验，我想避免验证。

我想在其上使用它的页面是通过 a 动态包含的，但据我所知，这不会导致问题。

我正在使用带有 Facelets 和 PrimeFaces 3.0M1 的 JSF 2.0 :D

Answer 1

让 JSF 通过 Ajax 进行验证即可。添加 或 ，用于处理当前输入字段并在 模糊 事件触发（例如，当您退出该字段时）。

<h:inputText id="foo" value="#{bean.foo}" required="true">
    <f:ajax event="blur" render="fooMessage" />
</h:inputText>
<h:message id="fooMessage" for="foo" />

无需通过 jQuery 重复/接管验证。

另请参阅：

• 使用 Eclipse 和 Glassifish 的 JSF 2.0 教程 - 还涵盖基于 Ajax 的验证

Answer 2

事实证明非常简单
只需添加对 p:commandButton onclick 事件的处理

<p:commandButton value="#{msg['forecast']}" onclick="validator.validate();" update="somegrid" actionListener="#{someBean.someAction}" styleClass="ui-priority-primary" />

然后只需常规 JQuery 验证器代码

var validator = null;
$(document).ready(function () { 
    validator = $("form[id='forecastinput']").validate({ 
    //rules, messages, etc. 
    }); 
});

Answer 3

你试过这个吗？

$("#buttonId").click(functionName);

Answer 4

如果您查看 Primefaces 命令按钮的标记，您会发现它默认使用类型为“提交”的按钮标签。

 添加徽章

这只是您将看到的示例。注意到，我不确定如何在这样的按钮上使用 Jquery 验证。就用户体验而言，服务器端验证都是通过 AJAX 完成的，因此对用户来说是透明的。我认为您避免这种情况的推理是不公正的，除非您的推理确实是性能是一个巨大的问题或者在视觉上它不满足您的业务需求。

Answer 5

JSF 无法与 JQuery 验证插件一起开箱即用。

您必须对其进行调整才能使其正常工作。这是因为 JSF 使用 AJAX 发布表单，而不是默认的 form.post 方法。

使用 h:commandlink 和 h:commandbutton 发布时使用它来链接 jquery 验证：

//executes code before running default onclick behavior
//@param domId dom element id for the object which onclick method is being intercepted
//@param code a function holding the code to run before executing the original onclick method. This function should return true if original method is to be performed
function triggerBeforeOnClick(domId, code){
    if(document.getElementById){
        var commandLink = document.getElementById(domId);
        var commandLinkOnClick = commandLink.onclick;
        commandLink.onclick = function(){
            if(code()){
                return commandLinkOnClick();
            }
            return false;
        }
    }
}

将 domId 替换为

'formId:commandLinkIDOrCommandButtonID'

确保在 $(document).ready(function( ... )); 中以及加载 jquery 和验证库之后使用它。

您还必须手动为每个输入字段指定验证规则（忽略有关此问题的 jquery 文档），如下所示：

$(document.getElementById('formId:inputId')).rules('add', {
      required: true
      , messages: {
         required: 'error message'
      }
});