2013-03-11 4 views
6

У меня есть шаблон, в котором я могу добавить класс ошибки CSS в div, когда проверка компонента не удалась, и она оказывает довольно приятный эффект на браузер.JSF: Не удалось выполнить проверку. Javascript callback

Теперь мне не нужно, чтобы добавить класс CSS к компоненту (this мне не поможет), а мне нужно, чтобы изменить CSS в HTML, который его окружает, это довольно просто с jQuery, однако я не могу найти ответ на javascript для неудачной проверки, возможно ли это? Я также использую простые шрифты (в случае, если они предоставляют такие возможности).

Markup:

<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED"> 
    <label class="control-label">Input value:</label> 
    <div class="controls"> 
     <h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail --> 
    </div> 
</div> 

если входной текст пуст, мне нужно DIV, что облегает «контрольную группу», чтобы иметь дополнительный класс. Я могу превратить его в <h:panelGroup>, так что это компонент JSF, но все же я не знаю, как это сделать. Javascript кажется мне проще:

jQuery("#ID_OF_DIV").addClass("error_class") 
+0

Да. Вы можете использовать '.addClass' для существующего div.Что вы делаете? – SRy

+0

Моя проблема в том, что у меня нет обратного вызова javascript, когда компонент выходит из строя. Вместо «onclick», «onmouseover» и т. Д. Мне нужно что-то вроде «onvalidationfailed», – arg20

ответ

20

Просто дайте JSF/EL условно распечатать класс, основанный на FacesContext#isValidationFailed().

<div class="control-group #{facesContext.validationFailed ? 'error_class' : ''}"> 

Вам нужно только убедиться, что этот элемент покрыт ajax update/render.

Другим способом является подключение к событию oncomplete произвольного компонента, основанного на ajax PrimeFaces. В области есть объект args, который, в свою очередь, имеет свойство validationFailed. Например. <p:commandButton oncomplete> или даже <p:ajaxStatus oncomplete>.

<p:ajaxStatus ... oncomplete="if (args &amp;&amp; args.validationFailed) $('#ID_OF_DIV').addClass('error_class')"> 
1

Если вы хотите делать все на стороне клиента.

 <h:outputText class="samplecls" rendered="#{facesContext.validationFailed}" 
       value="Please enter all the required fields"> 
    </h:outputText> 


    <div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED"> 
     <label class="control-label">Input value:</label> 
     <div class="controls"> 
      <h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail --> 
     </div> 
    </div> 

Javascript/Jquery

This class will exist in DOM only validation fails by rendered="#{facesContext.validationFailed}" 


    $(window).load(function(){ 
     if($('.samplecls').length>0){ 
      $("#ID_OF_DIV").addClass("error_class");  
     } 
}); 
Смежные вопросы