消息出现时动态应用 CSS JSF + JavaScript答案

【问题标题】：Applying CSS dynamically when message appears JSF + JavaScript消息出现时动态应用 CSS JSF + JavaScript
【发布时间】：2019-04-15 16:16:30
【问题描述】：

我在使用 JavaScript 或 jQuery 在组件中动态应用 css 时遇到问题。我尝试了一些如下所示的方法。

这是我正在尝试应用 CSS 的组件

<p:inputText id="txtUser" styleClass="form-control"
                                 value="#{registerMB.user.name}"
                                 disabled="#{registerMB.disabledUserDetailsBoolean}"
                                 requiredMessage="Por favor insira um Utilizador(NAME)."
                                 onblur="value=value.toUpperCase()">
                        <p:ajax event="blur" listener="#{registerMB.showUserDetails()}"
                                update="frmRegisterUser:accordion:results  frmRegisterUser:panelButton button"  />
                    </p:inputText>

这是我试图捕捉消息的组件：

<p:messages id="messages" autoUpdate="true" showDetail="false" closable="true" />

在浏览器中编译 HTML 后我有这个元素

<div class="ui-messages-error ui-corner-all"><a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;"><span class="ui-icon ui-icon-close"></span></a><span class="ui-messages-error-icon"></span>
    <ul>
        <li><span class="ui-messages-error-summary">Nome do Solicitante inválido!</span></li>
    </ul>
</div>

当消息 Nome do Solicitante inválido! 时，我正在尝试在 ID 为 txtUser 的组件上应用 CSS ui-state-error出现在屏幕上。我尝试了这段代码，但没有成功。关注我的 JQuery：

function checkName() {

   var txt = $(".ui-messages-error-summary" )[0].innerText;
   $(txt.replace(/^[ \t]+/gm, ''));

    if($(txt).is(':contains("Nome do Solicitante inválido!")')){
    $('#frmRegisterUser:accordion:txtUser').addClass('ui-state-error')
    }
}

感谢您的宝贵时间。

【问题讨论】：

您要在这里解决的实际问题是什么？当输入无效时，PrimeFaces 已经将其添加到输入中
@Kukeltje 我需要在触发事件模糊时使用 jquery 执行此操作。您可以推荐其他解决方案，但我的首要任务是使用 Jquery。
为什么？？？谁告诉你应该用 jquery 来完成？你有 99% 的把握在这里有一个xyproblem.info。不幸的是，我不想花时间在这上面。干杯...
好吧 @Kukeltje 不要浪费你的时间。

标签： javascript jquery css jsf-2.2

【解决方案1】：

我做到了，我使用了 DOM 并应用了 CSS。

function checkName() {
   var txt;

   var inputElement = $(".ui-messages-error-summary" )
   if(inputElement[0] != null){
    txt = inputElement[0].innerText;

    if(txt.includes("Name")){
    var element = document.getElementById("frmRequestRegisterUser:accordion:txtUser")
    element.classList.add("ui-state-error");
    }

   }
}

【讨论】：