From 4a61bca442d662185904fdb5777d9494d14bb117 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Sat, 16 Aug 2025 16:22:03 +0200
Subject: [PATCH] Add validation and `invalid` event.

---
 package.json     |  2 +-
 tp-form-value.js | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 1ce7d3a..6a8b6d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-form-value",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "tp-form-value.js",
   "scripts": {
diff --git a/tp-form-value.js b/tp-form-value.js
index 248b991..2895930 100644
--- a/tp-form-value.js
+++ b/tp-form-value.js
@@ -1,11 +1,11 @@
 /**
 @license
-Copyright (c) 2024 trading_peter
+Copyright (c) 2025 trading_peter
 This program is available under Apache License Version 2.0
 */
 
 import { FormElement } from '@tp/helpers/form-element.js';
-import { LitElement, html, css } from 'lit';
+import { LitElement, css } from 'lit';
 
 class TpElement extends FormElement(LitElement) {
   static get styles() {
@@ -17,6 +17,23 @@ class TpElement extends FormElement(LitElement) {
       `
     ];
   }
+
+  static get properties() {
+    return {
+      errorMessage: { type: String },
+    };
+  }
+
+  validate() {
+    if (!this.required) return true;
+
+    const isValid = this.value !== undefined && this.value !== null;
+    if (!isValid) {
+      this.dispatchEvent(new CustomEvent('invalid', { detail: this.errorMessage, bubbles: true, composed: true }));
+    }
+
+    return isValid;
+  }
 }
 
 window.customElements.define('tp-form-value', TpElement);