JQuery Validation Engine and primefaces commandButton

Question

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

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

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

Answer 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的验证。

另请参阅：

• 使用 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命令按钮的标记，您会发现它默认使用带有"提交"类型的按钮标签。

<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 完成的，因此对用户是透明的。 我觉得你避免这种情况的理由是不公正的，除非你的理由真的是性能是一个巨大的问题，或者它在视觉上不符合你的业务需求。

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'
      }
});