Question

我目前在使用客户端验证方面遇到了一些麻烦。我正在使用Jquery Validation Engine插件，我无法使用PrimeFaces commandButton。我认为问题是，primefaces commandButton不是你正常使用的正常提交按钮，现在我的问题是如何让它工作，以便当我点击我的客户端验证被触发时，因为只使用服务器端验证是我想要避免的用户体验。

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

我正在使用JSF 2.0与Facelets和PrimeFaces 3.0M1：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复制/接管验证。

另见：

JSF 2.0 tutorial with Eclipse and Glassifish - 还涵盖基于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">  Add Badge</span></button>

这只是你会看到的一个例子。注意到，我不确定如何在这样的按钮上使用Jquery验证。然而，考虑到用户体验，服务器端验证都是通过AJAX完成的，因此对用户来说是透明的。我认为你避免这种做法的理由是不公正的，除非你的推理确实是性能是一个巨大的问题，或者视觉上它不符合你的业务需求。

Answer 5

JSF不会与JQuery validate插件一起开箱即用。

你必须调整它才能使其正常工作。这是因为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'

确保在加载jquery并验证库之后$(document).ready(function( ... ));内使用它。

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

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

JQuery验证引擎和primefaces commandButton

5 个答案:

另见：