如何在需要的组件后显示一个简单的 *？

Question

我有这个样本表格：

<h:form id="myForm">
    <p:growl id="myGrowl" showDetail="true" life="5000" />
    <p:inputText value="#{pruebaBean.campoTexto}" required="true" requiredMessage="*" />
    <p:commandButton value="Ok" update="myForm" />
</h:form>

我想在所需的组件后显示一个 *。问题是 requiredMessage 显示在 p:growl 中，看起来很糟糕。

我必须以非常大的形式验证很多组件并添加

<p:message for="componentName" display="icon" />

表单中的每一个都会使表单变得更丑。

不显示也没关系（我不想在p:message里），只需要把需要的组件变成红色就好了。

希望你能帮助我。

Answer 1

如果你想要 'label'，请执行 PrimeFaces Showcase 中演示的操作：

 <p:outputLabel for="extended" value="Extended Label:" />
 <p:inputText id="extended" required="true" />

或者如果您只想要 'star'

 <p:inputText id="extended" required="true" />
 <p:outputLabel for="extended" value="" />

如果您只想要一个标记的边框，请查看生成的 html 所需输入

<input type="text" data-p-required="true" data-p-label="Extended Label" 
    class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
    aria-required="true" name="j_idt87:extended" id="j_idt87:extended" 
    role="textbox" aria-disabled="false" aria-readonly="false"/>

然后用 css 做点像

input[aria-required="true"], input[data-p-required="true"] {
    background-color: lightblue !important;
    background-image: none !important;
}

（如果您使选择器更具体，可以省略 !important）

根据 google（未测试）

，这对某些 jquery 可能有效

$("input[aria-required]").after("*");

或

$("input[aria-required]").before("*");

但这必须在每次 ajax 更新输入的调用后重新应用。所以我会选择第一个或第二个

如何在需要的组件后显示一个简单的 *？

How to show a simple * after a component that is required?

jsf

requiredfieldvalidator

primefaces