如何全局设置所有已设置 required="true" 的 PrimeFaces 输入组件的样式答案

【问题标题】：How to globally style all PrimeFaces input components having set required="true"如何全局设置所有已设置 required="true" 的 PrimeFaces 输入组件的样式
【发布时间】：2019-03-12 12:00:38
【问题描述】：

例如，考虑以下带有 primefaces 输入组件的简单表单，其中一些是必需的：

<h:form id="person">

    <h:panelGrid columns="2">

        <p:outputLabel for="inputFN" value="First Name"
            indicateRequired="auto" />
        <p:inputText id="inputFN" required="true"
            placeholder="First Name right here please." />

        <p:outputLabel for="inputLN" value="Last Name"
            indicateRequired="auto" />
        <p:inputText id="inputLN" required="true"
            placeholder="Last Name right here please." />

        <p:outputLabel for="inputBD" value="Date of Birht"
            indicateRequired="auto" />
        <p:calendar id="inputBD" required="false"
            placeholder="Please kindly let us know the very starting point in time of your existence!" />

        <p:outputLabel for="inputFC" value="Favourite Color"
            indicateRequired="auto" />
        <p:inputText id="inputFC" required="false"
            placeholder="What is your favourite colour?? Green? Yellow? Please!" />

        <p:outputLabel for="inputFH" value="Favourite Hobby"
            indicateRequired="auto" />
        <p:autoComplete id="inputFH" required="true"
            placeholder="Your favourite hobby? Stackoverflow I bet!" />

    </h:panelGrid>
    (*) these fields are vital! Don't even think about submission when empty!

</h:form>

inputFN（必需）、inputFC（非必需）和inputFH（必需）的渲染输出如下所示：

<input id="person:inputFN" name="person:inputFN" type="text" placeholder="First Name ..." aria-required="true"
    class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
    role="textbox" aria-disabled="false" aria-readonly="false">

<input id="person:inputFC" name="person:inputFC" type="text" placeholder="What is your favourite colour?..."
    class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
    role="textbox" aria-disabled="false" aria-readonly="false">

<input id="person:inputFH_input" name="person:inputFH_input" type="text"
    class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all ui-state-error"
    autocomplete="off" placeholder="Your hobby? ..." value="" role="textbox"
    aria-disabled="false" aria-readonly="false" aria-autocomplete="list">

我认为没有机会让 CSS 选择器仅捕获必填字段。请注意，并非所有必需的组件都获得@Malloware 建议使用的aria-required="true"。例如 p:autocomplete inputFH 没有。

由于我们有大量分布在视图和（嵌套）复合组件中的输入组件，并且 required 属性有时是动态确定的，而且我很懒，我想不触摸每个组件并每个组件并添加一个styleClass="#{something.isRequired ? 'required' : ''}"。

是否有一种简洁的方法可以全局启用客户端区分必填字段和可选字段？

我最终想要实现的是按颜色突出显示所有必填字段的占位符（使用::placeholder CSS 选择器），作为对p:outputLabel 提供的indicateRequired 的补充。

【问题讨论】：

“例如 p:autocomplete inputFH 没有。” 然后“修复”那个......渲染器很容易覆盖/扩展并提交拉取请求改变。 PF 经常接受他们。就像@Melloware 提到的那样，7.0RC3 可能已经修复了
@Kukeltje 作为一种解决方法，我将覆盖缺失的渲染器，直到我们可以迁移，因为 7.0 将修复它。仍然很好问，因为我不知何故完全错过了aria-required，直到 melloware 提到它。我似乎也一直在向搜索引擎提出错误的问题^^

标签： css jsf primefaces

【解决方案1】：

只需使用这个 CSS 选择器。保证适用于 PF 7.0 或更高版本的所有 PF 输入字段。

input[aria-required="true"] {
   color: red;
}

【讨论】：

这将是一个很好的起点。刚试了一下，发现并非所有的 PF 成分都有 aria-required，例如p:autoComplete :-( 此外，它必须在每个 AJAX 请求上刷新，这可能会切换组件的 required 属性，但这可以将脚本添加到全局 AJAX onsuccess 侦听器。
为什么要添加类而不使用 :input[aria-required="true"] 作为 CSS 中的选择器？
@Melloware 我会在今天中午（欧洲中部时间）试一试。您可以将 css 选择器添加到您的答案中，作为（可能更好的）替代方案。
更新了我的答案！同样是的，对于 7.0，我进行了大量重构，因此 aria-required 现在在所有输入上都是一致的。
这适用于任何可编辑的价值持有者吗？我想会的。在这种情况下，您可能需要添加 textarea、select 等。