From 33fde19770651333b6c795c12e14bffae33d4568 Mon Sep 17 00:00:00 2001
From: Markus Johansson <markus@enkelmedia.se>
Date: Thu, 10 Oct 2024 21:12:27 +0200
Subject: [PATCH] Updated example for validation context

---
 .../validation-context-dashboard.ts           | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts
index 67155928c4..bd8ede6874 100644
--- a/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts
+++ b/src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts
@@ -33,8 +33,12 @@ export class UmbExampleValidationContextDashboard extends UmbLitElement {
     });
 	}
 
-	#handleValidateNow() {
-		this.validation.validate();
+	async #handleValidateNow() {
+
+		await this.validation.validate().catch(()=>{});
+
+		console.log('Valid', this.validation.isValid);
+
 	}
 
 	#handleAddServerValidationError() {
@@ -52,12 +56,22 @@ export class UmbExampleValidationContextDashboard extends UmbLitElement {
 						<div>
 						<label>Name</label>
 						<uui-form-validation-message>
-							<uui-input type="text" ${umbBindToValidation(this,'$.name',this.name)} required></uui-input>
+							<uui-input
+								type="text"
+								.value=${this.name}
+								@input=${(e: InputEvent)=>this.name = (e.target as HTMLInputElement).value}
+								${umbBindToValidation(this,'$.name',this.name)}
+								required></uui-input>
 						</uui-form-validation-message>
 						</div>
 						<label>E-mail</label>
 						<uui-form-validation-message>
-							<uui-input type="email" ${umbBindToValidation(this,'$.email',this.email)} required></uui-input>
+							<uui-input
+								type="email"
+								.value=${this.email}
+								@input=${(e: InputEvent)=>this.email = (e.target as HTMLInputElement).value}
+								${umbBindToValidation(this,'$.email',this.email)}
+								required></uui-input>
 						</uui-form-validation-message>
 					</form>
 				</uui-form>