# Field validation

**URL:** <https://forum.getkirby.com/t/field-validation/30409>\
**Category:** Questions\
**Tags:** v4\
**Created:** [January 5, 2024, 5:03pm UTC](https://forum.getkirby.com/t/field-validation/30409 "2024-01-05T17:03:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![andykmz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andykmz/32/14216_2.png) [@andykmz](https://forum.getkirby.com/u/andykmz)\
**Post date:** [January 5, 2024, 5:03pm UTC](https://forum.getkirby.com/t/field-validation/30409/1 "2024-01-05T17:03:06Z")

</div>

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](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/daa0ba30c1bdd7ec30f512c22214613a943811df.png)

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**
>
> ```auto
> 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\-_]+)
> 
> ```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 5, 2024, 7:14pm UTC](https://forum.getkirby.com/t/field-validation/30409/2 "2024-01-05T19:14:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![andykmz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andykmz/32/14216_2.png) [@andykmz](https://forum.getkirby.com/u/andykmz)\
**Post date:** [January 5, 2024, 7:44pm UTC](https://forum.getkirby.com/t/field-validation/30409/3 "2024-01-05T19:44:37Z")

</div>

Yes, the latest version. Plainkit.

 ![20240106 032428](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/1/1218fd865b5dcae60db80d4554341553eeb0a314.png)

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

 ![20240106 033123](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/6/66a9f8b63823c06cfd5c5027e1fec4adccd27299.png)

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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 5, 2024, 7:50pm UTC](https://forum.getkirby.com/t/field-validation/30409/4 "2024-01-05T19:50:46Z")

</div>

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

```auto
<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:

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

```

---

<div class="post-metadata">

**Author:** ![andykmz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andykmz/32/14216_2.png) [@andykmz](https://forum.getkirby.com/u/andykmz)\
**Post date:** [January 5, 2024, 7:58pm UTC](https://forum.getkirby.com/t/field-validation/30409/5 "2024-01-05T19:58:11Z")

</div>

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

The CSS:

```auto
: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.