From 937d6575ed31962076a21a5ed5b4d4269cc39a65 Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@opencomputing.cn>
Date: Thu, 18 Jun 2026 17:45:28 +0800
Subject: [PATCH] fix: Form validation - fix red text CSS selector and add
 focus-to-clear

---
 bricks/css/bricks.css |  2 +-
 bricks/form.js        | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index 4b2d24d..9ec2a27 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -649,7 +649,7 @@ hr {
 .inputbox.field-error {
 	border-color: #e74c3c;
 }
-.field-error-msg .bricks-text {
+.bricks-text.field-error-msg {
 	color: #e74c3c !important;
 }
 
diff --git a/bricks/form.js b/bricks/form.js
index 6028310..373d3c3 100644
--- a/bricks/form.js
+++ b/bricks/form.js
@@ -71,6 +71,13 @@ bricks.FieldGroup = class {
 						box.add_widget(errw);
 						form.name_error_widgets[fields[i].name] = errw;
 						form.field_rules[fields[i].name] = fields[i].rules;
+						// Bind focus event to clear error
+						var fname = fields[i].name;
+						if (w.dom_element){
+							w.dom_element.addEventListener('focus', function(){
+								form.clear_field_error(fname);
+							});
+						}
 					}
 				} else {
 					bricks.debug(fields[i], 'createInput failed');
@@ -222,6 +229,12 @@ bricks.FormBase = class extends bricks.Layout {
 		var box = bricks.getWidgetById(name + '_box', this);
 		if (box && box.dom_element) box.dom_element.classList.add('field-error');
 	}
+	clear_field_error(name){
+		var ew = this.name_error_widgets[name];
+		if (ew){ ew.set_otext(''); ew.hide(); }
+		var box = bricks.getWidgetById(name + '_box', this);
+		if (box && box.dom_element) box.dom_element.classList.remove('field-error');
+	}
 	clear_all_errors(){
 		for (var name in this.name_error_widgets){
 			var ew = this.name_error_widgets[name];