我在使用 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')
}
}
感谢您的宝贵时间。
最佳答案
我做到了,我使用了 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");
}
}
}
关于javascript - 当消息出现时动态应用 CSS JSF + JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55693370/