CODEWITHSUNDEEP
cssjsfprimefaces
Selaron
Selaron

Reputation: 6184

How to globally style all PrimeFaces input components having set required="true"

As an example, think about the following simple form with primefaces input components some of which are required:

<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>

The rendered output of inputFN (required), inputFC (not required) and inputFH (required) looks like this:

<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">

I don't see a chance to have a CSS selector catching only the required fields. Note that not all required components get the aria-required="true" suggested to use by @Malloware. For example the p:autocomplete inputFH doesn't.

As we have plenty of input components distributed in views and (nested) composite components and the required attribute is sometimes determined dynamically plus I am lazy, I'd like to not touch each and every component and add a styleClass="#{something.isRequired ? 'required' : ''}" to it.

Is there a clean way to globally enable client side distinction of required vs optional fields?

What I finally want to achive is to highlight the placeholders (using the ::placeholder CSS selector) of all required fields by color, as an addition to the indicateRequired kindly provided by p:outputLabel.

Upvotes: 2

Views: 1024

Answers (1)

Melloware
Melloware

Reputation: 12019

Just use this CSS selector. Gauranteed to work for all PF input fields for PF 7.0or higher.

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

Upvotes: 2

Related Questions