Как изменить класс CSS для поля ввода и метки, если проверка не пройдена?

Question

Предположим, у меня есть имя пользователя для проверки, в этом случае мне нужно показать имя пользователя outputText и поле имени пользователя inputText красным цветом, когда проверка завершается неудачно, вместе с сообщением об ошибке.

Я попытался связать все это в групповой группе, чтобы в случае сбоя проверки все поля были затронуты. Но просто положить Panelgroup не работает.

Мой валидатор бобов

public void emailValidate(FacesContext context,
        UIComponent componentToValidate,
        Object value)
        throws ValidatorException {


    String email = value.toString();


    if (!Validator.isEmailAddress(email))
    {
        FacesMessage message =
                new FacesMessage(FacesMessage.SEVERITY_ERROR,"Email","Please enter valid email address");
                throw new ValidatorException(message);
    }


}

Мой JSF

<h:panelGroup>
<h:outputText value="Email"/>
<h:message for="emailInput/>
<h:inputText id="emailInput" value="#{mybean.email}" validator="#{mybean.emailValidate}"/>
</h:panelGroup>

Answer 1

Привязать компонент ввода к представлению через binding приписывать. Это станет доступным как UIInput ссылка на компонент в EL, так что вы можете использовать UIInput#isValid() в styleClass приписывать.

<h:outputLabel for="emailInput" value="Email" 
    styleClass="#{emailInput.valid ? '' : 'error'}" />

<h:inputText id="emailInput" binding="#{emailInput}" ... 
    styleClass="#{emailInput.valid ? '' : 'error'}" />

(обратите внимание, что я исправил ваш ярлык как настоящий ярлык; также обратите внимание, что вам вообще не нужно создавать какое-либо свойство bean-компонента, как предполагает ответ cubbuk)

Да, это может привести к некоторому не- СУХОМУ шаблонному коду в представлении. Вы можете абстрагировать это с помощью прослушивателя фазы или прослушивателя системных событий. Вы также можете использовать OmniFaces <o:highlight> компонент, который делает всю работу прозрачно. Смотрите также живую демонстрацию.

Answer 2

Вам нужно поле для представления проверки не удалось в компоненте поддержки. И в соответствии с условием этого поля проверки вы можете изменить CSS uiComponents, как показано ниже.

public void emailValidate(FacesContext context,
                UIComponent componentToValidate,
                Object value)
                throws ValidatorException
    {
       String email = value.toString();
       if (!Validator.isEmailAddress(email))
            {
                FacesMessage message =
                        new FacesMessage(FacesMessage.SEVERITY_ERROR, "Email", "Please enter valid email address");
                validationFailed = true;
                throw new ValidatorException(message);
            }
    }

public Boolean getValidationFailed()
{
    return validationFailed;
}

<style>
   .errorClass
   {
       background-color: red;
   }
   </style>
   <h:panelGroup>
      <h:outputText value="Email" styleClass="#{ozetPageBean.validationFailed ? 'errorClass' : ''}"/>
      <h:message for="emailInput"/>
      <h:inputText id="emailInput" 
                   value="#{ozetPageBean.email}" 
                   validator="#{ozetPageBean.emailValidate}"
                   styleClass="#{ozetPageBean.validationFailed ? 'errorClass' : ''}"/>
   </h:panelGroup>