Add validation and invalid event.

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": {

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);