驗證失敗後造型輸入組件

Question

如何在驗證失敗後對組件進行樣式設計？

我有以下文本框：

<p:inputText id="username" value="#{authController.username}" autocomplete="off" required="true" /> 

我想以後改變顏色：

<p:commandButton id="submit" value="Login" actionListener="#{authController.login}" update=":growl" /> 

被點擊。

我找到了這個site，並試圖實現在那裏已經顯示的方式。

這是我的課：

public class RequiredFieldValidationListener implements SystemEventListener { 

    public boolean isListenerForSource(Object source) { 
     return true; 
    } 

    public void processEvent(SystemEvent event) throws AbortProcessingException { 
     if (event.getSource() instanceof UIInput) { 
      UIInput source = (UIInput) event.getSource(); 

      if (!source.isValid()) { 
       String originalStyleClass = (String) source.getAttributes().get("styleClass"); 
       source.getAttributes().put("data-originaStyleClass", originalStyleClass); 
       source.getAttributes().put("styleClass", originalStyleClass + " ui-input-invalid"); 
      } else { 
       String originalStyleClass = (String) source.getAttributes().get("data-originaStyleClass"); 
       source.getAttributes().put("styleClass", originalStyleClass); 
      } 
     } 
    } 
} 

我註冊它faces-config.xml爲：

<application> 
    --- 

    <system-event-listener> 
     <system-event-listener-class>com.edfx.adb.web.event.RequiredFieldValidationListener</system-event-listener-class> 
     <system-event-class>javax.faces.event.PostValidateEvent</system-event-class> 
     <source-class>javax.faces.component.html.HtmlInputText</source-class>      
    </system-event-listener> 

</application> 

此外，我曾嘗試使用

@ListenersFor({ @ListenerFor(sourceClass = HtmlInputText.class, systemEventClass = PostValidateEvent.class) }) 
public class RequiredFieldValidationListener implements SystemEventListener { 

} 

我期待，當輸入字段是無效的，在我的情況下，空白，CSS類ui-input-invalid將被添加到類組件的屬性。但它不起作用。事實上，方法processEvent根本沒有執行。

我做錯了什麼，我該如何做到這一點？

Answer 1

你的具體問題造成的，因爲你沒有在完整的Ajax請求的更新輸入組件。您只更新咆哮組件。所以對輸入組件的更改從未反映到客戶端。

我建議剛更新整個形式，因爲它可能包含其他輸入組件也需要強調：

<p:commandButton ... update="@form" /> 

順便說一句，在@ListenersFor（和@ListenerFor）在這裏放錯了地方。它不以那種方式工作，而且他們被忽略。擺脫他們。另見How to register a (Component)SystemEventListener for all UIInputs。

---

無關的具體問題，這SystemEventListener方法來突出失敗的輸入組件是有缺陷的。當輸入組件位於迭代組件（例如<ui:repeat>或<h:dataTable>）內時它將失敗。即使只有其中一個失敗，它也會突出顯示全部行中的輸入組件。

更好的做法是採用客戶端方法。 JSF實用程序庫OmniFaces爲此提供了<o:highlight>組件。另見the <o:highlight> tag documentation,the <o:highlight> showcase example和the <o:highlight> source code。

Answer 2

我試圖鏈接的例子，得到了SystemEventListener.processEvent（）使用

<h:inputText ... required="true"/> 

時候所以我估計它做faces-config.xml中觸發。指定primefaces InputText作爲該源類的伎倆：

<application> 
    <system-event-listener> 
     <system-event-listener-class>RequiredFieldValidationListener</system-event-listener-class> 
     <system-event-class>javax.faces.event.PostValidateEvent</system-event-class> 
     <source-class>org.primefaces.component.inputtext.InputText</source-class> 
    </system-event-listener> 
</application> 

使用

<p:inputText ... required="true"/>