Как изменить класс css для ввода и метки при завершении проверки?

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

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

Моя поддержка bean валидатор

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>

Ответы

Ответ 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'}" />

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

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

Ответ 2

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