Field validation

Hi, I hope it is fine to continue asking on this thread?

I have 2 text fields which will be used to input LinkedIn profile URL and YouTube video URL.

I’ve been testing the regex pattern which I found around the internet and verified it multiple times with external regex website. But somehow Kirby’s panel UI doesn’t show the invalid field indicator (the red x) next to one of the invalid fields.

In this example, both fields are with a wrong “.com” spelling. But only Youtube field has the red invalid field indicator. I only realized the pattern check actually works because when I tried to save/publish the entry, a popup shows that both fields are actually invalid.

I wonder if this is a bug? My blueprint for that part:

        label: LinkedIn
        icon: linkedin
        placeholder: LinkedIn profile URL
        type: text
        pattern: (?:https?:\/\/(www.)?\/(mwlite\/|m\/)?in\/[a-zA-Z0-9_.-]+\/?)
        label: Showcase
        icon: youtube
        placeholder: YouTube video URL
        type: text
        pattern: (?:https?:\/\/)?(?:youtu\.be\/|(?:www\.|m\.)?youtube\.com\/(?:watch|v|embed)(?:\.php)?(?:\?.*v=|\/))([a-zA-Z0-9\-_]+)

Are you using 4.0.2 or another Kirby 4 version? I don’t get this red x at all.

Yes, the latest version. Plainkit.

When I look through DevTools, here’s what I see:

Upon typing invalid pattern (in this example, “.come”), Kirby only set the data-invalid="true" attribute to the second field.

I’m sure I didn’t tinker with the core Kirby files, but just in case, I can try replacing it with the original files again in the next few days.

Interestingly, for me they both have the data-invalid attribute, and additionally there is a label with an abbr element for both:

<label for="225" class="k-label k-field-label" title="Showcase"><span class="k-label-text"> Showcase </span><!----><abbr title="The field is invalid" class="k-label-invalid">×</abbr></label>

But in my installation, this element is set to display: none in both cases:

.k-label abbr.k-label-invalid {
  color: var(--color-red-700);
  display: none;

The red x will be shown when Kirby injected data-invalid=“true” attribute to the invalid text field.

The CSS:

:where(.k-field:has([data-invalid]),.k-section:has([data-invalid]))>header>.k-label abbr.k-label-invalid {
    display: inline-block;

As in my screenshot before, somehow that data-invalid="true" only being added into the second field.