JSF: Xác thực không thành công javascript callback

Question

Tôi có một mẫu mà tôi có thể thêm lớp lỗi CSS vào div khi xác thực thành phần không thành công và nó hiển thị hiệu ứng khá đẹp trên trình duyệt.

Bây giờ, Tôi không cần phải thêm một lớp css để một thành phần (this sẽ không giúp tôi), mà đúng hơn là tôi cần phải thay đổi css của html bao quanh nó, điều này là khá đơn giản với jQuery, tuy nhiên tôi dường như không thể tìm thấy một cuộc gọi lại javascript để xác nhận không thành công, là điều này có thể? Tôi cũng đang sử dụng các nguyên tố (trong trường hợp chúng cung cấp các khả năng như vậy).

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> 

nếu văn bản đầu vào là trống rỗng, tôi cần div mà kết thúc tốt đẹp "nhóm kiểm soát" để có một lớp học thêm. Tôi có thể biến nó thành một <h:panelGroup> vì vậy nó là một thành phần JSF nhưng tôi vẫn không biết làm thế nào để làm điều đó. Javascript có vẻ dễ dàng hơn như tôi có thể làm:

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

Answer 1

Chỉ cần cho JSF/EL có điều kiện in lớp dựa trên FacesContext#isValidationFailed().

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

Bạn chỉ cần đảm bảo rằng yếu tố này được bao phủ bởi cập nhật/render ajax.

Một cách khác sẽ hooking trên sự kiện oncomplete của một thành phần dựa trên ajax PrimeFaces tùy ý. Có một đối tượng args có sẵn trong phạm vi mà lần lượt có thuộc tính validationFailed. Ví dụ. <p:commandButton oncomplete> hoặc thậm chí <p:ajaxStatus oncomplete>.

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

Answer 2

Nếu bạn muốn làm mọi thứ ở phía khách hàng.

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