例如,考虑以下带有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选择器),作为indicateRequired
友情提供的p:outputLabel
的补充。
只需使用此CSS选择器。保证适用于PF 7.0或更高的所有PF输入字段。
input[aria-required="true"] {
color: red;
}