JQuery 验证引擎和 primefaces 命令按钮答案

【问题标题】：JQuery Validation Engine and primefaces commandButtonJQuery 验证引擎和 primefaces 命令按钮
【发布时间】：2011-08-28 22:15:45
【问题描述】：

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

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

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

【问题讨论】：

标签： jsf jsf-2 jquery-validate facelets primefaces

【解决方案1】：

让 JSF 通过 Ajax 进行验证。添加 <f:ajax> 或 <p:ajax> 处理当前输入字段并在 blur 事件触发时重新呈现关联的消息（例如，当您标记字段时）。

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

无需复制/接管 jQuery 的验证。

另见：

JSF 2.0 tutorial with Eclipse and Glassifish - 还包括基于 Ajax 的验证

【讨论】：

【解决方案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. 
    }); 
});

【讨论】：

【解决方案3】：

你试过了吗？

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

【讨论】：

感谢所有答案：D

【解决方案4】：

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

<button type="submit" style="height: 22px; line-height: 22px; font-size: 10px ! important;" onclick="PrimeFaces.ajax.AjaxRequest('/webapp/admin/listBadges.xhtml',{formId:'AddBadgesForm',async:false,global:true,source:'AddBadgesForm:j_idt54',process:'@all',update:'listBadgesForm:badgeList AddBadgesForm'});return false;" name="AddBadgesForm:j_idt54" id="AddBadgesForm:j_idt54" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false"><span class="ui-button-icon-primary ui-icon icoIDAdd"></span><span class="ui-button-text">&nbsp; Add Badge</span></button>

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

【讨论】：

【解决方案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'
      }
});

【讨论】：