ui-state-error not applied

Post Reply
UlrichC
Posts: 18
Joined: 03 Sep 2015, 23:49

16 Mar 2020, 23:26

Hi,

I bought Siberia Layout/Theme and started a new project with this cool theme. But for validation like (required, f:validateRegex and so on), the textfield (p:inputText) did not get the ui-error-state class and so, get not the red border to indicate an error on this field. Error message is displayed correctly.

If I provide the inline-style onto the xhtml-page:

Code: Select all

<scrip>
input:invalid {
    border: 1px solid red;
}
</script>
and attach the HTM5-attributes directly with the "pass-throught" like:

Code: Select all

<p:inputText id="email" type="email" placeholder="eMail-Adresse" value="..." required="true" pt:pattern=".{0}|.{6,64}" pt:required="required" />
the border turns red if validation fails as expected.

But I thought, that this will be already handled automatically by Primefaces? Because the class "ui-state-error" does exists and has the right color-definition, which belongs to the selected theme, but it is not applied to the p:inputText.

Can someone give a hint, why this happened?

Thank you very much in advance,
Ulrich

aragorn
Posts: 3968
Joined: 29 Jun 2013, 12:38

17 Mar 2020, 19:31

Hi,

To use required option, please remove the second required attribute(pt:required);

Code: Select all

<p:inputText id="email" type="email" placeholder="eMail-Adresse" value="..." required="true" pt:pattern=".{0}|.{6,64}" />
Some components have a wrapper element. Therefore, we can't use a style like input:invalid. But, you can add it into _forms.scss or _theme_styles.scss(suggested) for pattern validation on the specific inputs.

Or please use ClientsideValidation for pattern validation;
https://www.primefaces.org/showcase/ui/csv/custom.xhtml

Best Regards,

UlrichC
Posts: 18
Joined: 03 Sep 2015, 23:49

18 Mar 2020, 02:47

Hi aragorn,

thanks for your answer.
If I remove the second "pt:required", it does not work anymore and the border stays "normal" (no red border).

In the showcase of Siberia, the border turns red without any special handling and when I inspect the input field in the messages-showcase, they have the ui-state-error class attached... but in my example, it is not. The question is still: under which condition is the ui-state-error class added to an input field?

Thanks in advance
Ulrich

aragorn
Posts: 3968
Joined: 29 Jun 2013, 12:38

19 Mar 2020, 21:32

Hi,

Do you update inputText or wrapper component? Exp;

Code: Select all

<h:form>
     <p:inputText id="email" type="email" placeholder="eMail-Adresse" value="..." required="true" pt:pattern=".{0}|.{6,64}" />
     
     <p:commandButton value="Update" update="@form" />
 /</h:form>

Post Reply

Return to “Siberia - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest