How to Use Text Field "Pattern" Property?

I’m trying to use the pattern property of a text field, but I can’t seem to work out the correct syntax or determine if it’s being used at all.

  type: text
  placeholder: '#ffffff'
  converter: lower
  pattern: '/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/'

In this example, I’m trying to validate that an entered value matches a standard hex color pattern (such as #ffcc00).

But with this, the Panel seemingly accepts any input without complaining, such as test.

I expect it to complain about invalid syntax (of the pattern) or me inputing in text that doesn’t match the pattern.

Any suggestions? I’m using Kirby 3.2.3.

Hm, the pattern attribute does get added to the input but it doesn’t have any effect. Since it is a standard HTML attribute, browsers should automatically evaluate it. I can’t find anything that hints to the pattern being evaluated in the JS code (but then I’m not really great at understanding it)

<form method="POST" autocomplete="off" novalidate="novalidate" class="k-form" validate="true">

The panel adds novalidate, which might be causing Safari to skip validation.

In any case it doesn’t seem to have any effect, in none of the three browsers I tested and not even with a simple regex.

Created an issue:

1 Like

This should now be fixed on the develop branch.