JQuery Validation Engine и основные команды commandButton - PullRequest
1 голос
/ 19 мая 2011

В настоящее время у меня возникают проблемы с использованием проверки на стороне клиента. Я использую плагин Jquery Validation Engine и не могу заставить его работать с PrimeBaces commandButton. Я думаю, что проблема в том, что primefaces commandButton - это не обычная кнопка отправки, которую вы используете, и теперь мой вопрос заключается в том, как заставить ее работать так, чтобы, когда я нажимаю на моей стороне клиента, запускалась проверка, вызывало использование только стороны сервера валидация - это то, чего я хочу избежать для пользовательского опыта.

Страница, на которой я хочу ее использовать, динамически включается, но, по моему мнению, проблема не вызывает.

Я использую JSF 2.0 с Facelets и PrimeFaces 3.0M1: D

Ответы [ 5 ]

4 голосов
/ 19 мая 2011

Просто позвольте 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.

См. также:

2 голосов
/ 12 июня 2014

Оказывается довольно просто Просто добавьте обработку для вашего события 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. 
    }); 
});
1 голос
/ 23 ноября 2011

JSF не будет работать из коробки с плагином проверки JQuery.

Вы должны настроить его, чтобы он работал.Это связано с тем, что JSF отправляет формы, используя AJAX, а не метод form.post по умолчанию.

Используйте это для цепочки проверки jquery при публикации с использованием h: commandlink и h: commandbutton:

//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;
        }
    }
}

replacedomId с

'formId: commandLinkIDOrCommandButtonID'

Убедитесь, что вы используете его в $(document).ready(function( ... )); и после загрузки jquery и проверки библиотек.

YouТакже необходимо вручную указать правила проверки для каждого поля ввода (не обращайте внимания на документы jquery по этому вопросу), например:

$(document.getElementById('formId:inputId')).rules('add', {
      required: true
      , messages: {
         required: 'error message'
      }
});
1 голос
/ 19 мая 2011

Если вы посмотрите на разметку командной кнопки Primefaces, то увидите, что по умолчанию используется тег кнопки с типом «submit».

<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, поэтому она прозрачна для пользователя.Я чувствую, что ваши доводы об избежании этого являются несправедливыми, если только вы не рассуждаете, что производительность - это серьезная проблема или что визуально она не соответствует требованиям вашего бизнеса.

1 голос
/ 19 мая 2011

Вы пробовали это?

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

...