Field validation

Kirby 4 Question❓
1

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.

20240105 235451
20240105 2354511108×308 12.8 KB

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:

Blueprint 
      linkedin:
        label: LinkedIn
        icon: linkedin
        placeholder: LinkedIn profile URL
        type: text
        pattern: (?:https?:\/\/(www.)?linkedin.com\/(mwlite\/|m\/)?in\/[a-zA-Z0-9_.-]+\/?)
      
      showcase:
        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\-_]+)
2

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

3

Yes, the latest version. Plainkit.

20240106 032428
20240106 032428833×271 9.38 KB

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

20240106 033123
20240106 0331231962×945 124 KB

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.

4

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;
}
5

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.