How to Use Text Field "Pattern" Property?

Kirby 3 Solved ✅
1

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.

color:
  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.

2

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)

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

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

4

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.

5

Created an issue: https://github.com/getkirby/kirby/issues/2041

1 Like
6

This should now be fixed on the develop branch.