From 3d6d9802bfc93a9eadbf83df48bf73c4bb89606d Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 18 Aug 2025 13:09:24 +0200
Subject: [PATCH 01/37] [T2586]: basic regex validation phone nubmer in
 my2_new_sponsorship_wizard.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 25 +++++++++++++++++++
 .../pages/my2_new_sponsorship_wizard.xml      |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 0b04e4b2d..490ee765a 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -103,6 +103,31 @@ document.addEventListener("DOMContentLoaded", function (event) {
                         }
                     }
                 });
+
+                 this.$("input[phone_number]:visible").each(function () {
+                    var $input = $(this);
+                    if ($input.hasClass("is-invalid")) {
+                        return;
+                    }
+
+                    var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
+
+                    if (!phoneRegex.test($input.val())) {
+                        isValid = false;
+                        $input.addClass("is-invalid");
+
+                        var $errorHint = $(
+                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
+                        );
+
+                        var $select_container = $input.parent(".SelectComponent");
+                        if ($select_container.length > 0) {
+                            $select_container.before($errorHint);
+                        } else {
+                            $input.before($errorHint);
+                        }
+                    }
+                });
                 return isValid;
             },
 
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 7dcd8c8ba..1b1db1cd4 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -131,7 +131,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" />
+                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" phone_number=""/>
                 </t>
                 <!-- Street -->
                 <div class="d-flex">

From cb65fcb56934465a09927dad83944fa0738727de Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 18 Aug 2025 15:21:52 +0200
Subject: [PATCH 02/37] [T2586]: basic regex validation email in
 my2_new_sponsorship_wizard.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 26 +++++++++++++++++++
 .../pages/my2_new_sponsorship_wizard.xml      |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 490ee765a..5c61460b9 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -128,6 +128,32 @@ document.addEventListener("DOMContentLoaded", function (event) {
                         }
                     }
                 });
+
+                this.$("input[email]:visible").each(function () {
+                    var $input = $(this);
+                    if ($input.hasClass("is-invalid")) {
+                        return;
+                    }
+
+                    var phoneRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+                    if (!phoneRegex.test($input.val())) {
+                        isValid = false;
+                        $input.addClass("is-invalid");
+
+                        var $errorHint = $(
+                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
+                        );
+
+                        var $select_container = $input.parent(".SelectComponent");
+                        if ($select_container.length > 0) {
+                            $select_container.before($errorHint);
+                        } else {
+                            $input.before($errorHint);
+                        }
+                    }
+                });
+
                 return isValid;
             },
 
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 1b1db1cd4..0fbfda5ab 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -124,7 +124,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'E-mail'" />
                     <t t-set="input_id" t-value="'email'" />
-                    <input id="email" type="email" name="email" t-att-value="wizard.email" required="" />
+                    <input id="email" type="email" name="email" t-att-value="wizard.email" required="" email=""/>
                 </t>
                 <!-- Phone -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">

From 615847388f978d4fc4cd1688a7519b2c46dcc7fc Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 18 Aug 2025 16:07:48 +0200
Subject: [PATCH 03/37] [T2586] FEAT: add event (onBlur) binding for the email
 and phone number in my2_new_sponsorship_wizard.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 124 ++++++++++++------
 1 file changed, 84 insertions(+), 40 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 5c61460b9..92d741f45 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -17,8 +17,14 @@ document.addEventListener("DOMContentLoaded", function (event) {
             selector: ".new-sponsorship-wizard-form",
             events: {
                 "click .btn-next, .btn-previous, .btn-finish": "_onStepClick",
+                "blur input[email]:visible": "_onEmailBlur",
+                "blur input[phone_number]:visible": "_onPhoneNumberBlur",
             },
 
+            // ====================================================================
+            // Event Handlers
+            // ====================================================================
+
             /**
              * Handles the click on "Next" or "Previous" buttons.
              * @param {Event} ev
@@ -70,6 +76,24 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     );
             },
 
+             /**
+             * Event handler for when the email input loses focus.
+             */
+            _onEmailBlur: function (ev) {
+                this._validateEmail($(ev.currentTarget));
+            },
+
+            /**
+             * Event handler for when the phone input loses focus.
+             */
+            _onPhoneNumberBlur: function (ev) {
+                this._validatePhoneNumber($(ev.currentTarget));
+            },
+
+            // ====================================================================
+            // Validation Logic
+            // ====================================================================
+
             /**
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
@@ -104,59 +128,79 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     }
                 });
 
-                 this.$("input[phone_number]:visible").each(function () {
-                    var $input = $(this);
-                    if ($input.hasClass("is-invalid")) {
-                        return;
+                // validate email fields
+                this.$("input[email]:visible").each(function (i, el) {
+                    if (!this._validateEmail($(el))) {
+                        isValid = false;
                     }
+                }.bind(this));
 
-                    var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
-
-                    if (!phoneRegex.test($input.val())) {
+                // validate phone number fields
+                this.$("input[phone_number]:visible").each(function (i, el) {
+                    if (!this._validatePhoneNumber($(el))) {
                         isValid = false;
-                        $input.addClass("is-invalid");
+                    }
+                }.bind(this));
 
-                        var $errorHint = $(
-                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
-                        );
+                return isValid;
+            },
 
-                        var $select_container = $input.parent(".SelectComponent");
-                        if ($select_container.length > 0) {
-                            $select_container.before($errorHint);
-                        } else {
-                            $input.before($errorHint);
-                        }
-                    }
-                });
+            /**
+             * Validates a single email field for format.
+             * @param {jQuery} $input - The jQuery object for the input field.
+             * @returns {boolean}
+             */
+            _validateEmail: function($input) {
+                if (!$input.val()) {
+                    return true;
+                }
 
-                this.$("input[email]:visible").each(function () {
-                    var $input = $(this);
-                    if ($input.hasClass("is-invalid")) {
-                        return;
-                    }
+                var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
-                    var phoneRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+                $input.siblings('.input-invalid-hint').remove();
+                $input.removeClass('is-invalid');
 
-                    if (!phoneRegex.test($input.val())) {
-                        isValid = false;
-                        $input.addClass("is-invalid");
+                if (!emailRegex.test($input.val())) {
+                    $input.addClass("is-invalid");
+                    var $errorHint = $(
+                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
+                    );
+                    $input.before($errorHint);
+                    return false;
+                }
+                return true;
+            },
 
-                        var $errorHint = $(
-                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
-                        );
+            /**
+             * Validates a single phone number field for format.
+             * @param {jQuery} $input - The jQuery object for the input field.
+             * @returns {boolean}
+             */
+            _validatePhoneNumber: function($input) {
+                if (!$input.val()) {
+                    return true;
+                }
 
-                        var $select_container = $input.parent(".SelectComponent");
-                        if ($select_container.length > 0) {
-                            $select_container.before($errorHint);
-                        } else {
-                            $input.before($errorHint);
-                        }
-                    }
-                });
+                var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
 
-                return isValid;
+                $input.siblings('.input-invalid-hint').remove();
+                $input.removeClass('is-invalid');
+
+                if (!phoneRegex.test($input.val())) {
+                    $input.addClass("is-invalid");
+                    var $errorHint = $(
+                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
+                    );
+                    $input.before($errorHint);
+                    return false;
+                }
+                return true;
             },
 
+            // ====================================================================
+            // Helper Functions
+            // ====================================================================
+
             /**
              * Helper to convert form data array to a key-value object.
              * @param {Array} formData

From 5da7fec880d91770cd7471984d65db26c0086402 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 10:25:21 +0200
Subject: [PATCH 04/37] [T2586] FEAT: started to build a centralized field
 validation in utils/form_field_validator.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 43 ++++++---
 .../pages/my2_new_sponsorship_wizard.xml      |  6 +-
 .../static/src/utils/form_field_validator.js  | 94 +++++++++++++++++++
 .../templates/components/FormField.xml        |  2 +-
 theme_compassion_2025/views/assets.xml        |  1 +
 5 files changed, 130 insertions(+), 16 deletions(-)
 create mode 100644 theme_compassion_2025/static/src/utils/form_field_validator.js

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 92d741f45..8ff15b3a9 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -98,7 +98,23 @@ document.addEventListener("DOMContentLoaded", function (event) {
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
              */
-            _validateForm: function () {
+             _validateForm: function () {
+                var isValid = true;
+
+                // Finde alle FormField-Komponenten im aktuellen Schritt
+                this.$(".form-field-component:visible").each(function () {
+                    // Odoo hängt die Widget-Instanz an die DOM-Element-Daten an
+                    var fieldWidget = $(this).data("widget");
+
+                    // Rufe die öffentliche validate() Methode unseres neuen Widgets auf
+                    if (fieldWidget && !fieldWidget.validate()) {
+                        isValid = false;
+                    }
+                });
+
+                return isValid;
+            }
+            /*_validateForm: function () {
                 var isValid = true;
                 // Remove previous error messages and styles
                 this.$(".input-invalid-hint").remove();
@@ -126,21 +142,20 @@ document.addEventListener("DOMContentLoaded", function (event) {
                             $input.before($errorHint);
                         }
                     }
-                });
+                });*/
 
-                // validate email fields
-                this.$("input[email]:visible").each(function (i, el) {
-                    if (!this._validateEmail($(el))) {
-                        isValid = false;
-                    }
-                }.bind(this));
+                var fieldsToFurtherValidate = [
+                    {selector: "input[email]:visible", validator: this._validateEmail},
+                    {selector: "input[phone_number]:visible", validator: this._validatePhoneNumber}
+                ];
 
-                // validate phone number fields
-                this.$("input[phone_number]:visible").each(function (i, el) {
-                    if (!this._validatePhoneNumber($(el))) {
-                        isValid = false;
-                    }
-                }.bind(this));
+                fieldsToFurtherValidate.forEach(function (fieldType) {
+                    this.$(fieldType.selector).each(function (i, el) {
+                        if (!fieldType.validator.call(this, $(el))) {
+                            isValid = false;
+                        }
+                    }.bind(this));
+                }, this);
 
                 return isValid;
             },
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 0fbfda5ab..268b5d551 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -131,7 +131,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" phone_number=""/>
+                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone"
+                           required="required"
+                           data-validate-type="phone"
+                           data-error-required="This field is required."
+                           data-error-format="Please enter a valid phone number." />
                 </t>
                 <!-- Street -->
                 <div class="d-flex">
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
new file mode 100644
index 000000000..3c061e16f
--- /dev/null
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -0,0 +1,94 @@
+odoo.define("my_compassion.form_field_validator", function (require) {
+    "use strict";
+
+    var publicWidget = require("web.public.widget");
+    console.log("RangeInput component loaded");
+
+    publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
+        selector: ".form-field-component",
+        events: {
+            "blur input, input select": "_onBlur",
+        },
+
+        init: function () {
+            this._super.apply(this, arguments);
+        },
+
+        /**
+         * Die start-Methode wird aufgerufen, nachdem das DOM-Element des Widgets
+         * gerendert und verfügbar ist. Dies ist der richtige Ort für DOM-Manipulationen.
+         */
+        start: function () {
+            this._super.apply(this, arguments);
+            this.$input = this.$("input, select");
+            this.validationType = this.$input.data("validate-type");
+
+            this.errorMessages = {
+                required: this.$input.data("error-required") || "This field is required.",
+                format: this.$input.data("error-format") || "Invalid format.",
+            };
+
+            this.regex = {
+                email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+                phone: /^\+?(\d[\d\s-]{5,}\d)$/,
+            };
+        },
+        /**
+         * Validiert das Feld, wenn der Fokus verlassen wird.
+         */
+        _onBlur: function () {
+            this.validate();
+        },
+
+        /**
+         * Die zentrale Validierungsfunktion. Kann auch von aussen aufgerufen werden.
+         * @returns {boolean}
+         */
+        validate: function () {
+            this._clearError();
+            var value = this.$input.val();
+
+            // 1. Required-Prüfung
+            if (this.$input.prop("required") && !value) {
+                this._showError(this.errorMessages.required);
+                return false;
+            }
+
+            // 2. Format-Prüfung (nur wenn ein Wert vorhanden ist)
+            if (this.validationType && value && this.regex[this.validationType]) {
+                if (!this.regex[this.validationType].test(value)) {
+                    this._showError(this.errorMessages.format);
+                    return false;
+                }
+            }
+
+            this.$input.removeClass("is-invalid");
+            return true;
+        },
+
+        /**
+         * Zeigt eine Fehlermeldung an.
+         */
+        _showError: function (message) {
+            this.$input.addClass("is-invalid");
+            var $errorHint = $('<div class="input-invalid-hint text-mid-orange tiny-text mb-1">').text(message);
+
+            var $selectContainer = this.$input.closest(".SelectComponent");
+            if ($selectContainer.length > 0) {
+                $selectContainer.before($errorHint);
+            } else {
+                this.$input.before($errorHint);
+            }
+        },
+
+        /**
+         * Entfernt bestehende Fehlermeldungen.
+         */
+        _clearError: function () {
+            this.$el.find(".input-invalid-hint").remove();
+            this.$input.removeClass("is-invalid");
+        },
+    });
+
+    return publicWidget.registry.FormFieldValidator;
+});
\ No newline at end of file
diff --git a/theme_compassion_2025/templates/components/FormField.xml b/theme_compassion_2025/templates/components/FormField.xml
index 7087bd632..4d2341fde 100644
--- a/theme_compassion_2025/templates/components/FormField.xml
+++ b/theme_compassion_2025/templates/components/FormField.xml
@@ -12,7 +12,7 @@
 -->
 <odoo>
     <template id="FormFieldComponent" name="Form Field Component">
-        <div t-att-class="top_class">
+        <div t-attf-class="form-field-component #{top_class or ''}">
             <label t-att-for="input_id" class="text-core-blue body-small bold mb-1">
                 <t t-esc="label" />
             </label>
diff --git a/theme_compassion_2025/views/assets.xml b/theme_compassion_2025/views/assets.xml
index e00e47e67..179c4af94 100644
--- a/theme_compassion_2025/views/assets.xml
+++ b/theme_compassion_2025/views/assets.xml
@@ -107,6 +107,7 @@
             />
             <script type="text/javascript" src="/theme_compassion_2025/static/src/js/_password.js" />
             <script type="text/javascript" src="/theme_compassion_2025/static/src/js/_range_input.js" />
+            <script type="text/javascript" src="/theme_compassion_2025/static/src/utils/form_field_validator.js" />
             <link
                 rel="stylesheet"
                 type="text/scss"

From beabe75071fd58a55be0ef03908c5c81221e39e9 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 14:57:51 +0200
Subject: [PATCH 05/37] [T2586] FEAT: included Selection and made field
 validation configurable

---
 .../src/js/my2_new_sponsorship_wizard.js      | 128 ++----------------
 .../pages/my2_new_sponsorship_wizard.xml      |  54 ++++++--
 .../static/src/utils/form_field_validator.js  |  52 +++++--
 .../templates/components/Select.xml           |   5 +-
 4 files changed, 95 insertions(+), 144 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 8ff15b3a9..9fa075c71 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -16,9 +16,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         publicWidget.registry.NewSponsorshipWizard = publicWidget.Widget.extend({
             selector: ".new-sponsorship-wizard-form",
             events: {
-                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick",
-                "blur input[email]:visible": "_onEmailBlur",
-                "blur input[phone_number]:visible": "_onPhoneNumberBlur",
+                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick"
             },
 
             // ====================================================================
@@ -61,7 +59,19 @@ document.addEventListener("DOMContentLoaded", function (event) {
                         function (data) {
                             // Replace the form's inner content with the new step's HTML
                             if (data.html) {
+                            /*
                                 $(".new-sponsorship-wizard-form-content").html(data.html);
+                                $("html, body").animate({ scrollTop: 0 }, "slow");*/
+                                var $newContent = $(data.html);
+                                this.$(".new-sponsorship-wizard-form-content").empty().append($newContent);
+
+                                // DIES IST DER ENTSCHEIDENDE SCHRITT:
+                                // Odoo anweisen, alle Widgets innerhalb des neuen Inhalts zu starten.
+                                this.trigger_up('widgets_start_request', {
+                                    $target: $newContent
+                                });
+
+                                // Scrolle nach oben
                                 $("html, body").animate({ scrollTop: 0 }, "slow");
                             }
                             // Re-enable buttons
@@ -76,20 +86,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     );
             },
 
-             /**
-             * Event handler for when the email input loses focus.
-             */
-            _onEmailBlur: function (ev) {
-                this._validateEmail($(ev.currentTarget));
-            },
-
-            /**
-             * Event handler for when the phone input loses focus.
-             */
-            _onPhoneNumberBlur: function (ev) {
-                this._validatePhoneNumber($(ev.currentTarget));
-            },
-
             // ====================================================================
             // Validation Logic
             // ====================================================================
@@ -112,106 +108,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     }
                 });
 
-                return isValid;
-            }
-            /*_validateForm: function () {
-                var isValid = true;
-                // Remove previous error messages and styles
-                this.$(".input-invalid-hint").remove();
-                this.$("input.is-invalid").removeClass("is-invalid");
-
-                // Find all required inputs within the current step that are visible
-                this.$("input[required]:visible, select[required]:visible").each(function () {
-                    var $input = $(this);
-                    if (!$input.val()) {
-                        isValid = false;
-                        // Add the 'is-invalid' class
-                        $input.addClass("is-invalid");
-
-                        // Add a small text hint above the input field
-                        var $errorHint = $(
-                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">This field is required.</div>'
-                        );
-                        var $select_container = $input.parent(".SelectComponent");
-
-                        if ($select_container.length > 0) {
-                            // If the input is a select component, place the hint before the container
-                            $select_container.before($errorHint);
-                        } else {
-                            // Otherwise, it's a standard input, so place the hint before the input itself
-                            $input.before($errorHint);
-                        }
-                    }
-                });*/
-
-                var fieldsToFurtherValidate = [
-                    {selector: "input[email]:visible", validator: this._validateEmail},
-                    {selector: "input[phone_number]:visible", validator: this._validatePhoneNumber}
-                ];
-
-                fieldsToFurtherValidate.forEach(function (fieldType) {
-                    this.$(fieldType.selector).each(function (i, el) {
-                        if (!fieldType.validator.call(this, $(el))) {
-                            isValid = false;
-                        }
-                    }.bind(this));
-                }, this);
-
                 return isValid;
             },
-
-            /**
-             * Validates a single email field for format.
-             * @param {jQuery} $input - The jQuery object for the input field.
-             * @returns {boolean}
-             */
-            _validateEmail: function($input) {
-                if (!$input.val()) {
-                    return true;
-                }
-
-                var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-
-                $input.siblings('.input-invalid-hint').remove();
-                $input.removeClass('is-invalid');
-
-                if (!emailRegex.test($input.val())) {
-                    $input.addClass("is-invalid");
-                    var $errorHint = $(
-                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
-                    );
-                    $input.before($errorHint);
-                    return false;
-                }
-                return true;
-            },
-
-            /**
-             * Validates a single phone number field for format.
-             * @param {jQuery} $input - The jQuery object for the input field.
-             * @returns {boolean}
-             */
-            _validatePhoneNumber: function($input) {
-                if (!$input.val()) {
-                    return true;
-                }
-
-                var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
-
-                $input.siblings('.input-invalid-hint').remove();
-                $input.removeClass('is-invalid');
-
-                if (!phoneRegex.test($input.val())) {
-                    $input.addClass("is-invalid");
-                    var $errorHint = $(
-                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
-                    );
-                    $input.before($errorHint);
-                    return false;
-                }
-                return true;
-            },
-
             // ====================================================================
             // Helper Functions
             // ====================================================================
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 268b5d551..7bc37136f 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -103,39 +103,54 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Surname'" />
                     <t t-set="input_id" t-value="'lastname'" />
-                    <input id="lastname" type="text" name="lastname" t-att-value="wizard.lastname" required="" />
+                    <input id="lastname"
+                           type="text"
+                           name="lastname"
+                           t-att-value="wizard.lastname"
+                           data-is-required="true" />
                 </t>
                 <!-- Firstname -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Firstname'" />
                     <t t-set="input_id" t-value="'firstname'" />
-                    <input id="firstname" type="text" name="firstname" t-att-value="wizard.firstname" required="" />
+                    <input id="firstname"
+                           type="text"
+                           name="firstname"
+                           t-att-value="wizard.firstname"
+                           data-is-required="true" />
                 </t>
                 <!-- Date of birth -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Date of birth'" />
                     <t t-set="input_id" t-value="'birthdate'" />
-                    <input id="birthdate" type="date" name="birthdate" t-att-value="wizard.birthdate" required="" />
+                    <input id="birthdate"
+                           type="date"
+                           name="birthdate"
+                           t-att-value="wizard.birthdate"
+                           data-is-required="true"/>
                 </t>
                 <!-- Email -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'E-mail'" />
                     <t t-set="input_id" t-value="'email'" />
-                    <input id="email" type="email" name="email" t-att-value="wizard.email" required="" email=""/>
+                    <input type="email" name="email" t-att-value="wizard.email"
+                           data-is-required="true"
+                           data-validate-type="email"/>
                 </t>
                 <!-- Phone -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone"
-                           required="required"
-                           data-validate-type="phone"
-                           data-error-required="This field is required."
-                           data-error-format="Please enter a valid phone number." />
+                    <input id="phone"
+                           type="tel"
+                           name="phone"
+                           t-att-value="wizard.phone"
+                           data-is-required="true"
+                           data-validate-type="phone" />
                 </t>
                 <!-- Street -->
                 <div class="d-flex">
@@ -144,7 +159,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Street'" />
                             <t t-set="input_id" t-value="'street'" />
-                            <input id="street" type="text" name="street" t-att-value="wizard.street" required="" />
+                            <input id="street"
+                                   type="text"
+                                   name="street"
+                                   t-att-value="wizard.street"
+                                   data-is-required="true" />
                         </t>
                     </div>
                     <div class="flex-shrink-1 ml-4">
@@ -157,8 +176,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                                 type="text"
                                 name="street_number"
                                 t-att-value="wizard.street_number"
-                                required=""
-                            />
+                                data-is-required="true" />
                         </t>
                     </div>
                 </div>
@@ -169,7 +187,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Code'" />
                             <t t-set="input_id" t-value="'zip'" />
-                            <input id="zip" type="text" name="zip" t-att-value="wizard.zip" required="" />
+                            <input id="zip"
+                                   type="text"
+                                   name="zip"
+                                   t-att-value="wizard.zip"
+                                   data-is-required="true" />
                         </t>
                     </div>
                     <div class="w-100 flex-grow-1">
@@ -177,7 +199,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Locality'" />
                             <t t-set="input_id" t-value="'city'" />
-                            <input id="city" type="text" name="city" t-att-value="wizard.city" required="" />
+                            <input id="city"
+                                   type="text"
+                                   name="city"
+                                   t-att-value="wizard.city"
+                                   data-is-required="true" />
                         </t>
                     </div>
                 </div>
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 3c061e16f..ccf366388 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -2,16 +2,36 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     "use strict";
 
     var publicWidget = require("web.public.widget");
+
+    var validationConfig = {
+        email: {
+            regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+            defaultErrorMessage: "Please enter a valid email address."
+        },
+        phone: {
+            regex: /^\+?(\d[\d\s-]{5,}\d)$/,
+            defaultErrorMessage: "Please enter a valid phone number."
+        },
+        required: {
+            suffix: '<span class="text-mid-orange">*</span>',
+            defaultErrorMessage: "This field is required."
+        }
+    }
+
     console.log("RangeInput component loaded");
 
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
         selector: ".form-field-component",
         events: {
-            "blur input, input select": "_onBlur",
+          "blur input": "_onBlur",
+          "change select": "_onBlur",
+          "blur select": "_onBlur",
         },
 
         init: function () {
             this._super.apply(this, arguments);
+            this.validationType = null;
+            this.config = {};
         },
 
         /**
@@ -20,17 +40,24 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          */
         start: function () {
             this._super.apply(this, arguments);
+            this.$el.data("widget", this);
+
             this.$input = this.$("input, select");
+            this.isRequired = this.$input.data("is-required");
             this.validationType = this.$input.data("validate-type");
 
-            this.errorMessages = {
-                required: this.$input.data("error-required") || "This field is required.",
-                format: this.$input.data("error-format") || "Invalid format.",
-            };
+            if (this.isRequired) {
+                this.$el.find("label").append(validationConfig.required.suffix);
+            }
+
+            if (validationConfig[this.validationType]) {
+                this.config = validationConfig[this.validationType];
+            }
 
-            this.regex = {
-                email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-                phone: /^\+?(\d[\d\s-]{5,}\d)$/,
+
+            this.errorMessages = {
+                required: this.$input.data("error-required") || validationConfig.required.defaultErrorMessage,
+                format: this.$input.data("error-format") || this.config?.defaultErrorMessage
             };
         },
         /**
@@ -48,21 +75,18 @@ odoo.define("my_compassion.form_field_validator", function (require) {
             this._clearError();
             var value = this.$input.val();
 
-            // 1. Required-Prüfung
-            if (this.$input.prop("required") && !value) {
+            if (this.isRequired && !value) {
                 this._showError(this.errorMessages.required);
                 return false;
             }
 
-            // 2. Format-Prüfung (nur wenn ein Wert vorhanden ist)
-            if (this.validationType && value && this.regex[this.validationType]) {
-                if (!this.regex[this.validationType].test(value)) {
+             if (this.validationType && value && this.config.regex) {
+                if (!this.config.regex.test(value)) {
                     this._showError(this.errorMessages.format);
                     return false;
                 }
             }
 
-            this.$input.removeClass("is-invalid");
             return true;
         },
 
diff --git a/theme_compassion_2025/templates/components/Select.xml b/theme_compassion_2025/templates/components/Select.xml
index 8807fcca4..21b33df7d 100644
--- a/theme_compassion_2025/templates/components/Select.xml
+++ b/theme_compassion_2025/templates/components/Select.xml
@@ -16,11 +16,14 @@
         - custom-select: Applied to the <select> element for custom styling.
         - select-divider: Visual separator in the UI.
         - select-icon: Displays a dropdown icon (chevron) styled in blue.
+
+    TODO:
+    - remove t-att-required after refactoring of the validation process
 -->
 <odoo>
     <template id="SelectComponent">
         <div class="SelectComponent">
-            <select t-attf-class="custom-select" t-att-name="name" t-att-id="id" t-att-required="required">
+            <select t-attf-class="custom-select" t-att-name="name" t-att-id="id" t-att-required="required"  t-att-data-is-required="required">
                 <t t-raw="0" />
             </select>
             <span class="select-divider" />

From dc82b8332bd06644a4f1174912de20053d6dc1b6 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 15:03:54 +0200
Subject: [PATCH 06/37] [T2586] REFACTOR: added comments where needed

---
 .../static/src/utils/form_field_validator.js  | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index ccf366388..cc4d27b60 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -1,3 +1,20 @@
+/*
+ * Form Field Validator Widget
+ *
+ * Provides client-side validation for form fields inside
+ * `.form-field-component` wrappers. It validates:
+ *   - required fields
+ *   - email format
+ *   - phone number format
+ *
+ * Features:
+ *   - Displays inline error messages below/above inputs
+ *   - Marks invalid fields with the `is-invalid` class
+ *   - Appends an asterisk (*) to required field labels
+ *
+ *
+ * -------------------------------------------------------------------------------
+ */
 odoo.define("my_compassion.form_field_validator", function (require) {
     "use strict";
 
@@ -35,8 +52,8 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         },
 
         /**
-         * Die start-Methode wird aufgerufen, nachdem das DOM-Element des Widgets
-         * gerendert und verfügbar ist. Dies ist der richtige Ort für DOM-Manipulationen.
+         * The start method is called after the widget's DOM element
+         * has been rendered and is available. This is the right place for DOM manipulations.
          */
         start: function () {
             this._super.apply(this, arguments);
@@ -60,15 +77,16 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 format: this.$input.data("error-format") || this.config?.defaultErrorMessage
             };
         },
+
         /**
-         * Validiert das Feld, wenn der Fokus verlassen wird.
+         * Validates the field when it loses focus.
          */
         _onBlur: function () {
             this.validate();
         },
 
         /**
-         * Die zentrale Validierungsfunktion. Kann auch von aussen aufgerufen werden.
+         * The central validation function. Can also be called externally.
          * @returns {boolean}
          */
         validate: function () {
@@ -91,7 +109,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         },
 
         /**
-         * Zeigt eine Fehlermeldung an.
+         * Displays an error message.
          */
         _showError: function (message) {
             this.$input.addClass("is-invalid");
@@ -106,7 +124,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         },
 
         /**
-         * Entfernt bestehende Fehlermeldungen.
+         * Removes existing error messages.
          */
         _clearError: function () {
             this.$el.find(".input-invalid-hint").remove();

From b6c74a254a033daf95ba35be6f746c9a81c7a0f4 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 15:39:44 +0200
Subject: [PATCH 07/37] [T2586] refactoring

---
 .../src/js/my2_new_sponsorship_wizard.js      | 20 -------------------
 .../static/src/utils/form_field_validator.js  |  2 --
 2 files changed, 22 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 9fa075c71..00b2ad63b 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -19,10 +19,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
                 "click .btn-next, .btn-previous, .btn-finish": "_onStepClick"
             },
 
-            // ====================================================================
-            // Event Handlers
-            // ====================================================================
-
             /**
              * Handles the click on "Next" or "Previous" buttons.
              * @param {Event} ev
@@ -57,21 +53,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
                 })
                     .then(
                         function (data) {
-                            // Replace the form's inner content with the new step's HTML
                             if (data.html) {
-                            /*
-                                $(".new-sponsorship-wizard-form-content").html(data.html);
-                                $("html, body").animate({ scrollTop: 0 }, "slow");*/
                                 var $newContent = $(data.html);
                                 this.$(".new-sponsorship-wizard-form-content").empty().append($newContent);
-
-                                // DIES IST DER ENTSCHEIDENDE SCHRITT:
-                                // Odoo anweisen, alle Widgets innerhalb des neuen Inhalts zu starten.
                                 this.trigger_up('widgets_start_request', {
                                     $target: $newContent
                                 });
-
-                                // Scrolle nach oben
                                 $("html, body").animate({ scrollTop: 0 }, "slow");
                             }
                             // Re-enable buttons
@@ -86,10 +73,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     );
             },
 
-            // ====================================================================
-            // Validation Logic
-            // ====================================================================
-
             /**
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
@@ -110,9 +93,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
                 return isValid;
             },
-            // ====================================================================
-            // Helper Functions
-            // ====================================================================
 
             /**
              * Helper to convert form data array to a key-value object.
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index cc4d27b60..f758117dd 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -35,8 +35,6 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         }
     }
 
-    console.log("RangeInput component loaded");
-
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
         selector: ".form-field-component",
         events: {

From e26d9637f77be1750882c2c938079d0f82734906 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 16:22:43 +0200
Subject: [PATCH 08/37] [T2586] refactoring

---
 my_compassion/static/src/js/my2_new_sponsorship_wizard.js | 3 ---
 theme_compassion_2025/templates/components/Select.xml     | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 00b2ad63b..2f0d2c237 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -80,12 +80,9 @@ document.addEventListener("DOMContentLoaded", function (event) {
              _validateForm: function () {
                 var isValid = true;
 
-                // Finde alle FormField-Komponenten im aktuellen Schritt
                 this.$(".form-field-component:visible").each(function () {
-                    // Odoo hängt die Widget-Instanz an die DOM-Element-Daten an
                     var fieldWidget = $(this).data("widget");
 
-                    // Rufe die öffentliche validate() Methode unseres neuen Widgets auf
                     if (fieldWidget && !fieldWidget.validate()) {
                         isValid = false;
                     }
diff --git a/theme_compassion_2025/templates/components/Select.xml b/theme_compassion_2025/templates/components/Select.xml
index 21b33df7d..4e78e55c3 100644
--- a/theme_compassion_2025/templates/components/Select.xml
+++ b/theme_compassion_2025/templates/components/Select.xml
@@ -18,7 +18,7 @@
         - select-icon: Displays a dropdown icon (chevron) styled in blue.
 
     TODO:
-    - remove t-att-required after refactoring of the validation process
+    - remove t-att-required after refactoring of the validation process (TT2591)
 -->
 <odoo>
     <template id="SelectComponent">

From e4f0d8d07caaaaaf6822c23be8bda1945f2a87f7 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 16:29:18 +0200
Subject: [PATCH 09/37] [T2586] pre-commit

---
 .../src/js/my2_new_sponsorship_wizard.js      |  8 +-
 .../templates/pages/my2_child_timeline.xml    | 24 ++++-
 .../pages/my2_new_sponsorship_wizard.xml      | 93 +++++++++++--------
 .../static/src/utils/form_field_validator.js  | 23 +++--
 .../templates/components/Select.xml           |  8 +-
 5 files changed, 94 insertions(+), 62 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 2f0d2c237..66a1371e1 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         publicWidget.registry.NewSponsorshipWizard = publicWidget.Widget.extend({
             selector: ".new-sponsorship-wizard-form",
             events: {
-                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick"
+                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick",
             },
 
             /**
@@ -56,8 +56,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
                             if (data.html) {
                                 var $newContent = $(data.html);
                                 this.$(".new-sponsorship-wizard-form-content").empty().append($newContent);
-                                this.trigger_up('widgets_start_request', {
-                                    $target: $newContent
+                                this.trigger_up("widgets_start_request", {
+                                    $target: $newContent,
                                 });
                                 $("html, body").animate({ scrollTop: 0 }, "slow");
                             }
@@ -77,7 +77,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
              */
-             _validateForm: function () {
+            _validateForm: function () {
                 var isValid = true;
 
                 this.$(".form-field-component:visible").each(function () {
diff --git a/my_compassion/templates/pages/my2_child_timeline.xml b/my_compassion/templates/pages/my2_child_timeline.xml
index e96354997..24341bba6 100644
--- a/my_compassion/templates/pages/my2_child_timeline.xml
+++ b/my_compassion/templates/pages/my2_child_timeline.xml
@@ -40,7 +40,10 @@
                         <div class="d-flex flex-column flex-md-column-reverse">
                             <!-- Action buttons -->
                             <div class="child-action-buttons justify-content-md-start ml-md-3 pb-3 p-md-0">
-                                <t t-if="access_scope == 'sponsor'" t-call="theme_compassion_2025.ThemedButtonComponent">
+                                <t
+                                    t-if="access_scope == 'sponsor'"
+                                    t-call="theme_compassion_2025.ThemedButtonComponent"
+                                >
                                     <t t-set="variant" t-value="'compact'" />
                                     <t t-set="variation" t-value="'hollow'" />
                                     <t t-set="label" t-value="'Write a letter'" />
@@ -51,7 +54,10 @@
                                         t-value="'/my2/children/' + str(compassion_child.id) + '/letter/new'"
                                     />
                                 </t>
-                                <t t-if="access_scope == 'sponsor'" t-call="theme_compassion_2025.ThemedButtonComponent">
+                                <t
+                                    t-if="access_scope == 'sponsor'"
+                                    t-call="theme_compassion_2025.ThemedButtonComponent"
+                                >
                                     <t t-set="variant" t-value="'compact'" />
                                     <t t-set="variation" t-value="'hollow'" />
                                     <t t-set="label" t-value="'Give a gift'" />
@@ -64,7 +70,7 @@
                                     <t t-set="label" t-value="'Sponsor me'" />
                                     <t t-set="color" t-value="'dark-blue'" />
                                     <t t-set="text_color" t-value="'pure-white'" />
-                                    <t t-set="href" t-value="'/my2/new-sponsorship/' + str(compassion_child.id)"/>
+                                    <t t-set="href" t-value="'/my2/new-sponsorship/' + str(compassion_child.id)" />
                                 </t>
                             </div>
                             <!-- Child personal information -->
@@ -425,7 +431,11 @@
                 </div>
             </div>
             <!-- ### Partner and child timeline component ### -->
-            <section t-if="access_scope == 'sponsor'" class="cd-timeline js-cd-timeline" t-att-data-child-id="compassion_child.id">
+            <section
+                t-if="access_scope == 'sponsor'"
+                class="cd-timeline js-cd-timeline"
+                t-att-data-child-id="compassion_child.id"
+            >
                 <div class="cd-timeline__container">
                     <div class="content-column">
                         <t t-call="my_compassion.SponsorChildTimelineBatchComponent">
@@ -444,6 +454,10 @@
         </t>
         <!-- Include Custom Javascript -->
         <script type="text/javascript" src="/my_compassion/static/src/js/child_profile_tabs.js" />
-        <script t-if="access_scope == 'sponsor'" type="text/javascript" src="/my_compassion/static/src/js/child_profile_timeline.js" />
+        <script
+            t-if="access_scope == 'sponsor'"
+            type="text/javascript"
+            src="/my_compassion/static/src/js/child_profile_timeline.js"
+        />
     </template>
 </odoo>
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 7bc37136f..4269f1893 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -103,54 +103,66 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Surname'" />
                     <t t-set="input_id" t-value="'lastname'" />
-                    <input id="lastname"
-                           type="text"
-                           name="lastname"
-                           t-att-value="wizard.lastname"
-                           data-is-required="true" />
+                    <input
+                        id="lastname"
+                        type="text"
+                        name="lastname"
+                        t-att-value="wizard.lastname"
+                        data-is-required="true"
+                    />
                 </t>
                 <!-- Firstname -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Firstname'" />
                     <t t-set="input_id" t-value="'firstname'" />
-                    <input id="firstname"
-                           type="text"
-                           name="firstname"
-                           t-att-value="wizard.firstname"
-                           data-is-required="true" />
+                    <input
+                        id="firstname"
+                        type="text"
+                        name="firstname"
+                        t-att-value="wizard.firstname"
+                        data-is-required="true"
+                    />
                 </t>
                 <!-- Date of birth -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Date of birth'" />
                     <t t-set="input_id" t-value="'birthdate'" />
-                    <input id="birthdate"
-                           type="date"
-                           name="birthdate"
-                           t-att-value="wizard.birthdate"
-                           data-is-required="true"/>
+                    <input
+                        id="birthdate"
+                        type="date"
+                        name="birthdate"
+                        t-att-value="wizard.birthdate"
+                        data-is-required="true"
+                    />
                 </t>
                 <!-- Email -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'E-mail'" />
                     <t t-set="input_id" t-value="'email'" />
-                    <input type="email" name="email" t-att-value="wizard.email"
-                           data-is-required="true"
-                           data-validate-type="email"/>
+                    <input
+                        type="email"
+                        name="email"
+                        t-att-value="wizard.email"
+                        data-is-required="true"
+                        data-validate-type="email"
+                    />
                 </t>
                 <!-- Phone -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone"
-                           type="tel"
-                           name="phone"
-                           t-att-value="wizard.phone"
-                           data-is-required="true"
-                           data-validate-type="phone" />
+                    <input
+                        id="phone"
+                        type="tel"
+                        name="phone"
+                        t-att-value="wizard.phone"
+                        data-is-required="true"
+                        data-validate-type="phone"
+                    />
                 </t>
                 <!-- Street -->
                 <div class="d-flex">
@@ -159,11 +171,13 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Street'" />
                             <t t-set="input_id" t-value="'street'" />
-                            <input id="street"
-                                   type="text"
-                                   name="street"
-                                   t-att-value="wizard.street"
-                                   data-is-required="true" />
+                            <input
+                                id="street"
+                                type="text"
+                                name="street"
+                                t-att-value="wizard.street"
+                                data-is-required="true"
+                            />
                         </t>
                     </div>
                     <div class="flex-shrink-1 ml-4">
@@ -176,7 +190,8 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                                 type="text"
                                 name="street_number"
                                 t-att-value="wizard.street_number"
-                                data-is-required="true" />
+                                data-is-required="true"
+                            />
                         </t>
                     </div>
                 </div>
@@ -187,11 +202,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Code'" />
                             <t t-set="input_id" t-value="'zip'" />
-                            <input id="zip"
-                                   type="text"
-                                   name="zip"
-                                   t-att-value="wizard.zip"
-                                   data-is-required="true" />
+                            <input id="zip" type="text" name="zip" t-att-value="wizard.zip" data-is-required="true" />
                         </t>
                     </div>
                     <div class="w-100 flex-grow-1">
@@ -199,11 +210,13 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Locality'" />
                             <t t-set="input_id" t-value="'city'" />
-                            <input id="city"
-                                   type="text"
-                                   name="city"
-                                   t-att-value="wizard.city"
-                                   data-is-required="true" />
+                            <input
+                                id="city"
+                                type="text"
+                                name="city"
+                                t-att-value="wizard.city"
+                                data-is-required="true"
+                            />
                         </t>
                     </div>
                 </div>
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index f758117dd..60fdcacbd 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -23,24 +23,24 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     var validationConfig = {
         email: {
             regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-            defaultErrorMessage: "Please enter a valid email address."
+            defaultErrorMessage: "Please enter a valid email address.",
         },
         phone: {
             regex: /^\+?(\d[\d\s-]{5,}\d)$/,
-            defaultErrorMessage: "Please enter a valid phone number."
+            defaultErrorMessage: "Please enter a valid phone number.",
         },
         required: {
             suffix: '<span class="text-mid-orange">*</span>',
-            defaultErrorMessage: "This field is required."
-        }
-    }
+            defaultErrorMessage: "This field is required.",
+        },
+    };
 
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
         selector: ".form-field-component",
         events: {
-          "blur input": "_onBlur",
-          "change select": "_onBlur",
-          "blur select": "_onBlur",
+            "blur input": "_onBlur",
+            "change select": "_onBlur",
+            "blur select": "_onBlur",
         },
 
         init: function () {
@@ -69,10 +69,9 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 this.config = validationConfig[this.validationType];
             }
 
-
             this.errorMessages = {
                 required: this.$input.data("error-required") || validationConfig.required.defaultErrorMessage,
-                format: this.$input.data("error-format") || this.config?.defaultErrorMessage
+                format: this.$input.data("error-format") || this.config?.defaultErrorMessage,
             };
         },
 
@@ -96,7 +95,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 return false;
             }
 
-             if (this.validationType && value && this.config.regex) {
+            if (this.validationType && value && this.config.regex) {
                 if (!this.config.regex.test(value)) {
                     this._showError(this.errorMessages.format);
                     return false;
@@ -131,4 +130,4 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     });
 
     return publicWidget.registry.FormFieldValidator;
-});
\ No newline at end of file
+});
diff --git a/theme_compassion_2025/templates/components/Select.xml b/theme_compassion_2025/templates/components/Select.xml
index 4e78e55c3..2cabf4abe 100644
--- a/theme_compassion_2025/templates/components/Select.xml
+++ b/theme_compassion_2025/templates/components/Select.xml
@@ -23,7 +23,13 @@
 <odoo>
     <template id="SelectComponent">
         <div class="SelectComponent">
-            <select t-attf-class="custom-select" t-att-name="name" t-att-id="id" t-att-required="required"  t-att-data-is-required="required">
+            <select
+                t-attf-class="custom-select"
+                t-att-name="name"
+                t-att-id="id"
+                t-att-required="required"
+                t-att-data-is-required="required"
+            >
                 <t t-raw="0" />
             </select>
             <span class="select-divider" />

From adf0afc82ad7a2324f5c93020783eadf2e7362df Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 18 Aug 2025 13:09:24 +0200
Subject: [PATCH 10/37] [T2586]: basic regex validation phone nubmer in
 my2_new_sponsorship_wizard.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 25 +++++++++++++++++++
 .../pages/my2_new_sponsorship_wizard.xml      |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 0b04e4b2d..490ee765a 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -103,6 +103,31 @@ document.addEventListener("DOMContentLoaded", function (event) {
                         }
                     }
                 });
+
+                 this.$("input[phone_number]:visible").each(function () {
+                    var $input = $(this);
+                    if ($input.hasClass("is-invalid")) {
+                        return;
+                    }
+
+                    var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
+
+                    if (!phoneRegex.test($input.val())) {
+                        isValid = false;
+                        $input.addClass("is-invalid");
+
+                        var $errorHint = $(
+                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
+                        );
+
+                        var $select_container = $input.parent(".SelectComponent");
+                        if ($select_container.length > 0) {
+                            $select_container.before($errorHint);
+                        } else {
+                            $input.before($errorHint);
+                        }
+                    }
+                });
                 return isValid;
             },
 
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 7dcd8c8ba..1b1db1cd4 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -131,7 +131,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" />
+                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" phone_number=""/>
                 </t>
                 <!-- Street -->
                 <div class="d-flex">

From 1514502658f330dc2291e927ed9db87d41670818 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 18 Aug 2025 15:21:52 +0200
Subject: [PATCH 11/37] [T2586]: basic regex validation email in
 my2_new_sponsorship_wizard.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 26 +++++++++++++++++++
 .../pages/my2_new_sponsorship_wizard.xml      |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 490ee765a..5c61460b9 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -128,6 +128,32 @@ document.addEventListener("DOMContentLoaded", function (event) {
                         }
                     }
                 });
+
+                this.$("input[email]:visible").each(function () {
+                    var $input = $(this);
+                    if ($input.hasClass("is-invalid")) {
+                        return;
+                    }
+
+                    var phoneRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+                    if (!phoneRegex.test($input.val())) {
+                        isValid = false;
+                        $input.addClass("is-invalid");
+
+                        var $errorHint = $(
+                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
+                        );
+
+                        var $select_container = $input.parent(".SelectComponent");
+                        if ($select_container.length > 0) {
+                            $select_container.before($errorHint);
+                        } else {
+                            $input.before($errorHint);
+                        }
+                    }
+                });
+
                 return isValid;
             },
 
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 1b1db1cd4..0fbfda5ab 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -124,7 +124,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'E-mail'" />
                     <t t-set="input_id" t-value="'email'" />
-                    <input id="email" type="email" name="email" t-att-value="wizard.email" required="" />
+                    <input id="email" type="email" name="email" t-att-value="wizard.email" required="" email=""/>
                 </t>
                 <!-- Phone -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">

From eb120c05edc162d06008313f67ae31cde5d1e823 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 18 Aug 2025 16:07:48 +0200
Subject: [PATCH 12/37] [T2586] FEAT: add event (onBlur) binding for the email
 and phone number in my2_new_sponsorship_wizard.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 124 ++++++++++++------
 1 file changed, 84 insertions(+), 40 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 5c61460b9..92d741f45 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -17,8 +17,14 @@ document.addEventListener("DOMContentLoaded", function (event) {
             selector: ".new-sponsorship-wizard-form",
             events: {
                 "click .btn-next, .btn-previous, .btn-finish": "_onStepClick",
+                "blur input[email]:visible": "_onEmailBlur",
+                "blur input[phone_number]:visible": "_onPhoneNumberBlur",
             },
 
+            // ====================================================================
+            // Event Handlers
+            // ====================================================================
+
             /**
              * Handles the click on "Next" or "Previous" buttons.
              * @param {Event} ev
@@ -70,6 +76,24 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     );
             },
 
+             /**
+             * Event handler for when the email input loses focus.
+             */
+            _onEmailBlur: function (ev) {
+                this._validateEmail($(ev.currentTarget));
+            },
+
+            /**
+             * Event handler for when the phone input loses focus.
+             */
+            _onPhoneNumberBlur: function (ev) {
+                this._validatePhoneNumber($(ev.currentTarget));
+            },
+
+            // ====================================================================
+            // Validation Logic
+            // ====================================================================
+
             /**
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
@@ -104,59 +128,79 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     }
                 });
 
-                 this.$("input[phone_number]:visible").each(function () {
-                    var $input = $(this);
-                    if ($input.hasClass("is-invalid")) {
-                        return;
+                // validate email fields
+                this.$("input[email]:visible").each(function (i, el) {
+                    if (!this._validateEmail($(el))) {
+                        isValid = false;
                     }
+                }.bind(this));
 
-                    var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
-
-                    if (!phoneRegex.test($input.val())) {
+                // validate phone number fields
+                this.$("input[phone_number]:visible").each(function (i, el) {
+                    if (!this._validatePhoneNumber($(el))) {
                         isValid = false;
-                        $input.addClass("is-invalid");
+                    }
+                }.bind(this));
 
-                        var $errorHint = $(
-                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
-                        );
+                return isValid;
+            },
 
-                        var $select_container = $input.parent(".SelectComponent");
-                        if ($select_container.length > 0) {
-                            $select_container.before($errorHint);
-                        } else {
-                            $input.before($errorHint);
-                        }
-                    }
-                });
+            /**
+             * Validates a single email field for format.
+             * @param {jQuery} $input - The jQuery object for the input field.
+             * @returns {boolean}
+             */
+            _validateEmail: function($input) {
+                if (!$input.val()) {
+                    return true;
+                }
 
-                this.$("input[email]:visible").each(function () {
-                    var $input = $(this);
-                    if ($input.hasClass("is-invalid")) {
-                        return;
-                    }
+                var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 
-                    var phoneRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+                $input.siblings('.input-invalid-hint').remove();
+                $input.removeClass('is-invalid');
 
-                    if (!phoneRegex.test($input.val())) {
-                        isValid = false;
-                        $input.addClass("is-invalid");
+                if (!emailRegex.test($input.val())) {
+                    $input.addClass("is-invalid");
+                    var $errorHint = $(
+                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
+                    );
+                    $input.before($errorHint);
+                    return false;
+                }
+                return true;
+            },
 
-                        var $errorHint = $(
-                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
-                        );
+            /**
+             * Validates a single phone number field for format.
+             * @param {jQuery} $input - The jQuery object for the input field.
+             * @returns {boolean}
+             */
+            _validatePhoneNumber: function($input) {
+                if (!$input.val()) {
+                    return true;
+                }
 
-                        var $select_container = $input.parent(".SelectComponent");
-                        if ($select_container.length > 0) {
-                            $select_container.before($errorHint);
-                        } else {
-                            $input.before($errorHint);
-                        }
-                    }
-                });
+                var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
 
-                return isValid;
+                $input.siblings('.input-invalid-hint').remove();
+                $input.removeClass('is-invalid');
+
+                if (!phoneRegex.test($input.val())) {
+                    $input.addClass("is-invalid");
+                    var $errorHint = $(
+                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
+                    );
+                    $input.before($errorHint);
+                    return false;
+                }
+                return true;
             },
 
+            // ====================================================================
+            // Helper Functions
+            // ====================================================================
+
             /**
              * Helper to convert form data array to a key-value object.
              * @param {Array} formData

From 2e81ff6f0be6aad36ccd034d8c27e81a9daf1ad8 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 10:25:21 +0200
Subject: [PATCH 13/37] [T2586] FEAT: started to build a centralized field
 validation in utils/form_field_validator.js

---
 .../src/js/my2_new_sponsorship_wizard.js      | 43 ++++++---
 .../pages/my2_new_sponsorship_wizard.xml      |  6 +-
 .../static/src/utils/form_field_validator.js  | 94 +++++++++++++++++++
 .../templates/components/FormField.xml        | 15 +--
 theme_compassion_2025/views/assets.xml        |  1 +
 5 files changed, 133 insertions(+), 26 deletions(-)
 create mode 100644 theme_compassion_2025/static/src/utils/form_field_validator.js

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 92d741f45..8ff15b3a9 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -98,7 +98,23 @@ document.addEventListener("DOMContentLoaded", function (event) {
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
              */
-            _validateForm: function () {
+             _validateForm: function () {
+                var isValid = true;
+
+                // Finde alle FormField-Komponenten im aktuellen Schritt
+                this.$(".form-field-component:visible").each(function () {
+                    // Odoo hängt die Widget-Instanz an die DOM-Element-Daten an
+                    var fieldWidget = $(this).data("widget");
+
+                    // Rufe die öffentliche validate() Methode unseres neuen Widgets auf
+                    if (fieldWidget && !fieldWidget.validate()) {
+                        isValid = false;
+                    }
+                });
+
+                return isValid;
+            }
+            /*_validateForm: function () {
                 var isValid = true;
                 // Remove previous error messages and styles
                 this.$(".input-invalid-hint").remove();
@@ -126,21 +142,20 @@ document.addEventListener("DOMContentLoaded", function (event) {
                             $input.before($errorHint);
                         }
                     }
-                });
+                });*/
 
-                // validate email fields
-                this.$("input[email]:visible").each(function (i, el) {
-                    if (!this._validateEmail($(el))) {
-                        isValid = false;
-                    }
-                }.bind(this));
+                var fieldsToFurtherValidate = [
+                    {selector: "input[email]:visible", validator: this._validateEmail},
+                    {selector: "input[phone_number]:visible", validator: this._validatePhoneNumber}
+                ];
 
-                // validate phone number fields
-                this.$("input[phone_number]:visible").each(function (i, el) {
-                    if (!this._validatePhoneNumber($(el))) {
-                        isValid = false;
-                    }
-                }.bind(this));
+                fieldsToFurtherValidate.forEach(function (fieldType) {
+                    this.$(fieldType.selector).each(function (i, el) {
+                        if (!fieldType.validator.call(this, $(el))) {
+                            isValid = false;
+                        }
+                    }.bind(this));
+                }, this);
 
                 return isValid;
             },
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 0fbfda5ab..268b5d551 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -131,7 +131,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" phone_number=""/>
+                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone"
+                           required="required"
+                           data-validate-type="phone"
+                           data-error-required="This field is required."
+                           data-error-format="Please enter a valid phone number." />
                 </t>
                 <!-- Street -->
                 <div class="d-flex">
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
new file mode 100644
index 000000000..3c061e16f
--- /dev/null
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -0,0 +1,94 @@
+odoo.define("my_compassion.form_field_validator", function (require) {
+    "use strict";
+
+    var publicWidget = require("web.public.widget");
+    console.log("RangeInput component loaded");
+
+    publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
+        selector: ".form-field-component",
+        events: {
+            "blur input, input select": "_onBlur",
+        },
+
+        init: function () {
+            this._super.apply(this, arguments);
+        },
+
+        /**
+         * Die start-Methode wird aufgerufen, nachdem das DOM-Element des Widgets
+         * gerendert und verfügbar ist. Dies ist der richtige Ort für DOM-Manipulationen.
+         */
+        start: function () {
+            this._super.apply(this, arguments);
+            this.$input = this.$("input, select");
+            this.validationType = this.$input.data("validate-type");
+
+            this.errorMessages = {
+                required: this.$input.data("error-required") || "This field is required.",
+                format: this.$input.data("error-format") || "Invalid format.",
+            };
+
+            this.regex = {
+                email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+                phone: /^\+?(\d[\d\s-]{5,}\d)$/,
+            };
+        },
+        /**
+         * Validiert das Feld, wenn der Fokus verlassen wird.
+         */
+        _onBlur: function () {
+            this.validate();
+        },
+
+        /**
+         * Die zentrale Validierungsfunktion. Kann auch von aussen aufgerufen werden.
+         * @returns {boolean}
+         */
+        validate: function () {
+            this._clearError();
+            var value = this.$input.val();
+
+            // 1. Required-Prüfung
+            if (this.$input.prop("required") && !value) {
+                this._showError(this.errorMessages.required);
+                return false;
+            }
+
+            // 2. Format-Prüfung (nur wenn ein Wert vorhanden ist)
+            if (this.validationType && value && this.regex[this.validationType]) {
+                if (!this.regex[this.validationType].test(value)) {
+                    this._showError(this.errorMessages.format);
+                    return false;
+                }
+            }
+
+            this.$input.removeClass("is-invalid");
+            return true;
+        },
+
+        /**
+         * Zeigt eine Fehlermeldung an.
+         */
+        _showError: function (message) {
+            this.$input.addClass("is-invalid");
+            var $errorHint = $('<div class="input-invalid-hint text-mid-orange tiny-text mb-1">').text(message);
+
+            var $selectContainer = this.$input.closest(".SelectComponent");
+            if ($selectContainer.length > 0) {
+                $selectContainer.before($errorHint);
+            } else {
+                this.$input.before($errorHint);
+            }
+        },
+
+        /**
+         * Entfernt bestehende Fehlermeldungen.
+         */
+        _clearError: function () {
+            this.$el.find(".input-invalid-hint").remove();
+            this.$input.removeClass("is-invalid");
+        },
+    });
+
+    return publicWidget.registry.FormFieldValidator;
+});
\ No newline at end of file
diff --git a/theme_compassion_2025/templates/components/FormField.xml b/theme_compassion_2025/templates/components/FormField.xml
index 5713ef29a..4accfe415 100644
--- a/theme_compassion_2025/templates/components/FormField.xml
+++ b/theme_compassion_2025/templates/components/FormField.xml
@@ -7,22 +7,15 @@
 
     Props:
     - label (string): The text seen on top of the component.
-    - invalid_hint (string): Hint to show when the input is given the 'is-invalid' class.
     - input_id (string): ID of the linked input
     - top_class (string): class for the outer div element wrapping everything
 -->
 <odoo>
     <template id="FormFieldComponent" name="Form Field Component">
-        <t t-set="invalid_hint" t-value="invalid_hint or 'Invalid value.'" />
-        <div t-attf-class="form-field-container #{top_class}">
-            <t t-if="label">
-                <label t-att-for="input_id" t-attf-class="text-#{label_color or 'core-blue'} body-small bold mb-1">
-                    <t t-esc="label" />
-                </label>
-            </t>
-            <div class="invalid-hint text-mid-orange tiny-text mb-1">
-                <t t-esc="invalid_hint" />
-            </div>
+        <div t-attf-class="form-field-component #{top_class or ''}">
+            <label t-if="label" t-att-for="input_id" t-attf-class="text-#{label_color or 'core-blue'} body-small bold mb-1">
+                <t t-esc="label" />
+            </label>
             <t t-raw="0" />
         </div>
     </template>
diff --git a/theme_compassion_2025/views/assets.xml b/theme_compassion_2025/views/assets.xml
index 0f230733c..efbbae505 100644
--- a/theme_compassion_2025/views/assets.xml
+++ b/theme_compassion_2025/views/assets.xml
@@ -107,6 +107,7 @@
             />
             <script type="text/javascript" src="/theme_compassion_2025/static/src/js/_password.js" />
             <script type="text/javascript" src="/theme_compassion_2025/static/src/js/_range_input.js" />
+            <script type="text/javascript" src="/theme_compassion_2025/static/src/utils/form_field_validator.js" />
             <link
                 rel="stylesheet"
                 type="text/scss"

From 92955351f80613da72960a2173b19438b233f90d Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 14:57:51 +0200
Subject: [PATCH 14/37] [T2586] FEAT: included Selection and made field
 validation configurable

---
 .../src/js/my2_new_sponsorship_wizard.js      | 128 ++----------------
 .../pages/my2_new_sponsorship_wizard.xml      |  54 ++++++--
 .../static/src/utils/form_field_validator.js  |  52 +++++--
 .../templates/components/Select.xml           |   5 +-
 4 files changed, 95 insertions(+), 144 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 8ff15b3a9..9fa075c71 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -16,9 +16,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         publicWidget.registry.NewSponsorshipWizard = publicWidget.Widget.extend({
             selector: ".new-sponsorship-wizard-form",
             events: {
-                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick",
-                "blur input[email]:visible": "_onEmailBlur",
-                "blur input[phone_number]:visible": "_onPhoneNumberBlur",
+                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick"
             },
 
             // ====================================================================
@@ -61,7 +59,19 @@ document.addEventListener("DOMContentLoaded", function (event) {
                         function (data) {
                             // Replace the form's inner content with the new step's HTML
                             if (data.html) {
+                            /*
                                 $(".new-sponsorship-wizard-form-content").html(data.html);
+                                $("html, body").animate({ scrollTop: 0 }, "slow");*/
+                                var $newContent = $(data.html);
+                                this.$(".new-sponsorship-wizard-form-content").empty().append($newContent);
+
+                                // DIES IST DER ENTSCHEIDENDE SCHRITT:
+                                // Odoo anweisen, alle Widgets innerhalb des neuen Inhalts zu starten.
+                                this.trigger_up('widgets_start_request', {
+                                    $target: $newContent
+                                });
+
+                                // Scrolle nach oben
                                 $("html, body").animate({ scrollTop: 0 }, "slow");
                             }
                             // Re-enable buttons
@@ -76,20 +86,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     );
             },
 
-             /**
-             * Event handler for when the email input loses focus.
-             */
-            _onEmailBlur: function (ev) {
-                this._validateEmail($(ev.currentTarget));
-            },
-
-            /**
-             * Event handler for when the phone input loses focus.
-             */
-            _onPhoneNumberBlur: function (ev) {
-                this._validatePhoneNumber($(ev.currentTarget));
-            },
-
             // ====================================================================
             // Validation Logic
             // ====================================================================
@@ -112,106 +108,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     }
                 });
 
-                return isValid;
-            }
-            /*_validateForm: function () {
-                var isValid = true;
-                // Remove previous error messages and styles
-                this.$(".input-invalid-hint").remove();
-                this.$("input.is-invalid").removeClass("is-invalid");
-
-                // Find all required inputs within the current step that are visible
-                this.$("input[required]:visible, select[required]:visible").each(function () {
-                    var $input = $(this);
-                    if (!$input.val()) {
-                        isValid = false;
-                        // Add the 'is-invalid' class
-                        $input.addClass("is-invalid");
-
-                        // Add a small text hint above the input field
-                        var $errorHint = $(
-                            '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">This field is required.</div>'
-                        );
-                        var $select_container = $input.parent(".SelectComponent");
-
-                        if ($select_container.length > 0) {
-                            // If the input is a select component, place the hint before the container
-                            $select_container.before($errorHint);
-                        } else {
-                            // Otherwise, it's a standard input, so place the hint before the input itself
-                            $input.before($errorHint);
-                        }
-                    }
-                });*/
-
-                var fieldsToFurtherValidate = [
-                    {selector: "input[email]:visible", validator: this._validateEmail},
-                    {selector: "input[phone_number]:visible", validator: this._validatePhoneNumber}
-                ];
-
-                fieldsToFurtherValidate.forEach(function (fieldType) {
-                    this.$(fieldType.selector).each(function (i, el) {
-                        if (!fieldType.validator.call(this, $(el))) {
-                            isValid = false;
-                        }
-                    }.bind(this));
-                }, this);
-
                 return isValid;
             },
-
-            /**
-             * Validates a single email field for format.
-             * @param {jQuery} $input - The jQuery object for the input field.
-             * @returns {boolean}
-             */
-            _validateEmail: function($input) {
-                if (!$input.val()) {
-                    return true;
-                }
-
-                var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-
-                $input.siblings('.input-invalid-hint').remove();
-                $input.removeClass('is-invalid');
-
-                if (!emailRegex.test($input.val())) {
-                    $input.addClass("is-invalid");
-                    var $errorHint = $(
-                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid email address.</div>'
-                    );
-                    $input.before($errorHint);
-                    return false;
-                }
-                return true;
-            },
-
-            /**
-             * Validates a single phone number field for format.
-             * @param {jQuery} $input - The jQuery object for the input field.
-             * @returns {boolean}
-             */
-            _validatePhoneNumber: function($input) {
-                if (!$input.val()) {
-                    return true;
-                }
-
-                var phoneRegex = /^\+?(\d[\d\s-]{5,}\d)$/;
-
-                $input.siblings('.input-invalid-hint').remove();
-                $input.removeClass('is-invalid');
-
-                if (!phoneRegex.test($input.val())) {
-                    $input.addClass("is-invalid");
-                    var $errorHint = $(
-                        '<div class="input-invalid-hint text-mid-orange tiny-text mb-1">Please enter a valid phone number.</div>'
-                    );
-                    $input.before($errorHint);
-                    return false;
-                }
-                return true;
-            },
-
             // ====================================================================
             // Helper Functions
             // ====================================================================
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 268b5d551..7bc37136f 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -103,39 +103,54 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Surname'" />
                     <t t-set="input_id" t-value="'lastname'" />
-                    <input id="lastname" type="text" name="lastname" t-att-value="wizard.lastname" required="" />
+                    <input id="lastname"
+                           type="text"
+                           name="lastname"
+                           t-att-value="wizard.lastname"
+                           data-is-required="true" />
                 </t>
                 <!-- Firstname -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Firstname'" />
                     <t t-set="input_id" t-value="'firstname'" />
-                    <input id="firstname" type="text" name="firstname" t-att-value="wizard.firstname" required="" />
+                    <input id="firstname"
+                           type="text"
+                           name="firstname"
+                           t-att-value="wizard.firstname"
+                           data-is-required="true" />
                 </t>
                 <!-- Date of birth -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Date of birth'" />
                     <t t-set="input_id" t-value="'birthdate'" />
-                    <input id="birthdate" type="date" name="birthdate" t-att-value="wizard.birthdate" required="" />
+                    <input id="birthdate"
+                           type="date"
+                           name="birthdate"
+                           t-att-value="wizard.birthdate"
+                           data-is-required="true"/>
                 </t>
                 <!-- Email -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'E-mail'" />
                     <t t-set="input_id" t-value="'email'" />
-                    <input id="email" type="email" name="email" t-att-value="wizard.email" required="" email=""/>
+                    <input type="email" name="email" t-att-value="wizard.email"
+                           data-is-required="true"
+                           data-validate-type="email"/>
                 </t>
                 <!-- Phone -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone" type="tel" name="phone" t-att-value="wizard.phone"
-                           required="required"
-                           data-validate-type="phone"
-                           data-error-required="This field is required."
-                           data-error-format="Please enter a valid phone number." />
+                    <input id="phone"
+                           type="tel"
+                           name="phone"
+                           t-att-value="wizard.phone"
+                           data-is-required="true"
+                           data-validate-type="phone" />
                 </t>
                 <!-- Street -->
                 <div class="d-flex">
@@ -144,7 +159,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Street'" />
                             <t t-set="input_id" t-value="'street'" />
-                            <input id="street" type="text" name="street" t-att-value="wizard.street" required="" />
+                            <input id="street"
+                                   type="text"
+                                   name="street"
+                                   t-att-value="wizard.street"
+                                   data-is-required="true" />
                         </t>
                     </div>
                     <div class="flex-shrink-1 ml-4">
@@ -157,8 +176,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                                 type="text"
                                 name="street_number"
                                 t-att-value="wizard.street_number"
-                                required=""
-                            />
+                                data-is-required="true" />
                         </t>
                     </div>
                 </div>
@@ -169,7 +187,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Code'" />
                             <t t-set="input_id" t-value="'zip'" />
-                            <input id="zip" type="text" name="zip" t-att-value="wizard.zip" required="" />
+                            <input id="zip"
+                                   type="text"
+                                   name="zip"
+                                   t-att-value="wizard.zip"
+                                   data-is-required="true" />
                         </t>
                     </div>
                     <div class="w-100 flex-grow-1">
@@ -177,7 +199,11 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Locality'" />
                             <t t-set="input_id" t-value="'city'" />
-                            <input id="city" type="text" name="city" t-att-value="wizard.city" required="" />
+                            <input id="city"
+                                   type="text"
+                                   name="city"
+                                   t-att-value="wizard.city"
+                                   data-is-required="true" />
                         </t>
                     </div>
                 </div>
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 3c061e16f..ccf366388 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -2,16 +2,36 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     "use strict";
 
     var publicWidget = require("web.public.widget");
+
+    var validationConfig = {
+        email: {
+            regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+            defaultErrorMessage: "Please enter a valid email address."
+        },
+        phone: {
+            regex: /^\+?(\d[\d\s-]{5,}\d)$/,
+            defaultErrorMessage: "Please enter a valid phone number."
+        },
+        required: {
+            suffix: '<span class="text-mid-orange">*</span>',
+            defaultErrorMessage: "This field is required."
+        }
+    }
+
     console.log("RangeInput component loaded");
 
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
         selector: ".form-field-component",
         events: {
-            "blur input, input select": "_onBlur",
+          "blur input": "_onBlur",
+          "change select": "_onBlur",
+          "blur select": "_onBlur",
         },
 
         init: function () {
             this._super.apply(this, arguments);
+            this.validationType = null;
+            this.config = {};
         },
 
         /**
@@ -20,17 +40,24 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          */
         start: function () {
             this._super.apply(this, arguments);
+            this.$el.data("widget", this);
+
             this.$input = this.$("input, select");
+            this.isRequired = this.$input.data("is-required");
             this.validationType = this.$input.data("validate-type");
 
-            this.errorMessages = {
-                required: this.$input.data("error-required") || "This field is required.",
-                format: this.$input.data("error-format") || "Invalid format.",
-            };
+            if (this.isRequired) {
+                this.$el.find("label").append(validationConfig.required.suffix);
+            }
+
+            if (validationConfig[this.validationType]) {
+                this.config = validationConfig[this.validationType];
+            }
 
-            this.regex = {
-                email: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-                phone: /^\+?(\d[\d\s-]{5,}\d)$/,
+
+            this.errorMessages = {
+                required: this.$input.data("error-required") || validationConfig.required.defaultErrorMessage,
+                format: this.$input.data("error-format") || this.config?.defaultErrorMessage
             };
         },
         /**
@@ -48,21 +75,18 @@ odoo.define("my_compassion.form_field_validator", function (require) {
             this._clearError();
             var value = this.$input.val();
 
-            // 1. Required-Prüfung
-            if (this.$input.prop("required") && !value) {
+            if (this.isRequired && !value) {
                 this._showError(this.errorMessages.required);
                 return false;
             }
 
-            // 2. Format-Prüfung (nur wenn ein Wert vorhanden ist)
-            if (this.validationType && value && this.regex[this.validationType]) {
-                if (!this.regex[this.validationType].test(value)) {
+             if (this.validationType && value && this.config.regex) {
+                if (!this.config.regex.test(value)) {
                     this._showError(this.errorMessages.format);
                     return false;
                 }
             }
 
-            this.$input.removeClass("is-invalid");
             return true;
         },
 
diff --git a/theme_compassion_2025/templates/components/Select.xml b/theme_compassion_2025/templates/components/Select.xml
index 8807fcca4..21b33df7d 100644
--- a/theme_compassion_2025/templates/components/Select.xml
+++ b/theme_compassion_2025/templates/components/Select.xml
@@ -16,11 +16,14 @@
         - custom-select: Applied to the <select> element for custom styling.
         - select-divider: Visual separator in the UI.
         - select-icon: Displays a dropdown icon (chevron) styled in blue.
+
+    TODO:
+    - remove t-att-required after refactoring of the validation process
 -->
 <odoo>
     <template id="SelectComponent">
         <div class="SelectComponent">
-            <select t-attf-class="custom-select" t-att-name="name" t-att-id="id" t-att-required="required">
+            <select t-attf-class="custom-select" t-att-name="name" t-att-id="id" t-att-required="required"  t-att-data-is-required="required">
                 <t t-raw="0" />
             </select>
             <span class="select-divider" />

From c0b461d1a2435a9fbc818edb00a6075fd130c42e Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 15:03:54 +0200
Subject: [PATCH 15/37] [T2586] REFACTOR: added comments where needed

---
 .../static/src/utils/form_field_validator.js  | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index ccf366388..cc4d27b60 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -1,3 +1,20 @@
+/*
+ * Form Field Validator Widget
+ *
+ * Provides client-side validation for form fields inside
+ * `.form-field-component` wrappers. It validates:
+ *   - required fields
+ *   - email format
+ *   - phone number format
+ *
+ * Features:
+ *   - Displays inline error messages below/above inputs
+ *   - Marks invalid fields with the `is-invalid` class
+ *   - Appends an asterisk (*) to required field labels
+ *
+ *
+ * -------------------------------------------------------------------------------
+ */
 odoo.define("my_compassion.form_field_validator", function (require) {
     "use strict";
 
@@ -35,8 +52,8 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         },
 
         /**
-         * Die start-Methode wird aufgerufen, nachdem das DOM-Element des Widgets
-         * gerendert und verfügbar ist. Dies ist der richtige Ort für DOM-Manipulationen.
+         * The start method is called after the widget's DOM element
+         * has been rendered and is available. This is the right place for DOM manipulations.
          */
         start: function () {
             this._super.apply(this, arguments);
@@ -60,15 +77,16 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 format: this.$input.data("error-format") || this.config?.defaultErrorMessage
             };
         },
+
         /**
-         * Validiert das Feld, wenn der Fokus verlassen wird.
+         * Validates the field when it loses focus.
          */
         _onBlur: function () {
             this.validate();
         },
 
         /**
-         * Die zentrale Validierungsfunktion. Kann auch von aussen aufgerufen werden.
+         * The central validation function. Can also be called externally.
          * @returns {boolean}
          */
         validate: function () {
@@ -91,7 +109,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         },
 
         /**
-         * Zeigt eine Fehlermeldung an.
+         * Displays an error message.
          */
         _showError: function (message) {
             this.$input.addClass("is-invalid");
@@ -106,7 +124,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         },
 
         /**
-         * Entfernt bestehende Fehlermeldungen.
+         * Removes existing error messages.
          */
         _clearError: function () {
             this.$el.find(".input-invalid-hint").remove();

From 7772e950fc2b813856519bcd73060493f6e92104 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 15:39:44 +0200
Subject: [PATCH 16/37] [T2586] refactoring

---
 .../src/js/my2_new_sponsorship_wizard.js      | 20 -------------------
 .../static/src/utils/form_field_validator.js  |  2 --
 2 files changed, 22 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 9fa075c71..00b2ad63b 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -19,10 +19,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
                 "click .btn-next, .btn-previous, .btn-finish": "_onStepClick"
             },
 
-            // ====================================================================
-            // Event Handlers
-            // ====================================================================
-
             /**
              * Handles the click on "Next" or "Previous" buttons.
              * @param {Event} ev
@@ -57,21 +53,12 @@ document.addEventListener("DOMContentLoaded", function (event) {
                 })
                     .then(
                         function (data) {
-                            // Replace the form's inner content with the new step's HTML
                             if (data.html) {
-                            /*
-                                $(".new-sponsorship-wizard-form-content").html(data.html);
-                                $("html, body").animate({ scrollTop: 0 }, "slow");*/
                                 var $newContent = $(data.html);
                                 this.$(".new-sponsorship-wizard-form-content").empty().append($newContent);
-
-                                // DIES IST DER ENTSCHEIDENDE SCHRITT:
-                                // Odoo anweisen, alle Widgets innerhalb des neuen Inhalts zu starten.
                                 this.trigger_up('widgets_start_request', {
                                     $target: $newContent
                                 });
-
-                                // Scrolle nach oben
                                 $("html, body").animate({ scrollTop: 0 }, "slow");
                             }
                             // Re-enable buttons
@@ -86,10 +73,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
                     );
             },
 
-            // ====================================================================
-            // Validation Logic
-            // ====================================================================
-
             /**
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
@@ -110,9 +93,6 @@ document.addEventListener("DOMContentLoaded", function (event) {
 
                 return isValid;
             },
-            // ====================================================================
-            // Helper Functions
-            // ====================================================================
 
             /**
              * Helper to convert form data array to a key-value object.
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index cc4d27b60..f758117dd 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -35,8 +35,6 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         }
     }
 
-    console.log("RangeInput component loaded");
-
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
         selector: ".form-field-component",
         events: {

From ed809ed3a4adad7d2ceb4bb433bd467fbf0b7899 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 19 Aug 2025 16:22:43 +0200
Subject: [PATCH 17/37] [T2586] refactoring

---
 my_compassion/static/src/js/my2_new_sponsorship_wizard.js | 3 ---
 theme_compassion_2025/templates/components/Select.xml     | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 00b2ad63b..2f0d2c237 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -80,12 +80,9 @@ document.addEventListener("DOMContentLoaded", function (event) {
              _validateForm: function () {
                 var isValid = true;
 
-                // Finde alle FormField-Komponenten im aktuellen Schritt
                 this.$(".form-field-component:visible").each(function () {
-                    // Odoo hängt die Widget-Instanz an die DOM-Element-Daten an
                     var fieldWidget = $(this).data("widget");
 
-                    // Rufe die öffentliche validate() Methode unseres neuen Widgets auf
                     if (fieldWidget && !fieldWidget.validate()) {
                         isValid = false;
                     }
diff --git a/theme_compassion_2025/templates/components/Select.xml b/theme_compassion_2025/templates/components/Select.xml
index 21b33df7d..4e78e55c3 100644
--- a/theme_compassion_2025/templates/components/Select.xml
+++ b/theme_compassion_2025/templates/components/Select.xml
@@ -18,7 +18,7 @@
         - select-icon: Displays a dropdown icon (chevron) styled in blue.
 
     TODO:
-    - remove t-att-required after refactoring of the validation process
+    - remove t-att-required after refactoring of the validation process (TT2591)
 -->
 <odoo>
     <template id="SelectComponent">

From b2467571e6676db690e049448aff112c86075a1e Mon Sep 17 00:00:00 2001
From: Nathan Felber <nfelber@compassion.ch>
Date: Tue, 26 Aug 2025 13:24:23 +0200
Subject: [PATCH 18/37] Run pre-commit formatting

---
 .../src/js/my2_new_sponsorship_wizard.js      |  8 +-
 .../pages/my2_new_sponsorship_wizard.xml      | 93 +++++++++++--------
 .../static/src/utils/form_field_validator.js  | 23 +++--
 .../templates/components/FormField.xml        |  6 +-
 .../templates/components/Select.xml           |  8 +-
 5 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
index 2f0d2c237..66a1371e1 100644
--- a/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
+++ b/my_compassion/static/src/js/my2_new_sponsorship_wizard.js
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
         publicWidget.registry.NewSponsorshipWizard = publicWidget.Widget.extend({
             selector: ".new-sponsorship-wizard-form",
             events: {
-                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick"
+                "click .btn-next, .btn-previous, .btn-finish": "_onStepClick",
             },
 
             /**
@@ -56,8 +56,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
                             if (data.html) {
                                 var $newContent = $(data.html);
                                 this.$(".new-sponsorship-wizard-form-content").empty().append($newContent);
-                                this.trigger_up('widgets_start_request', {
-                                    $target: $newContent
+                                this.trigger_up("widgets_start_request", {
+                                    $target: $newContent,
                                 });
                                 $("html, body").animate({ scrollTop: 0 }, "slow");
                             }
@@ -77,7 +77,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
              * Validates required fields in the current step.
              * @returns {boolean} - True if valid, false otherwise.
              */
-             _validateForm: function () {
+            _validateForm: function () {
                 var isValid = true;
 
                 this.$(".form-field-component:visible").each(function () {
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 7bc37136f..4269f1893 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -103,54 +103,66 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Surname'" />
                     <t t-set="input_id" t-value="'lastname'" />
-                    <input id="lastname"
-                           type="text"
-                           name="lastname"
-                           t-att-value="wizard.lastname"
-                           data-is-required="true" />
+                    <input
+                        id="lastname"
+                        type="text"
+                        name="lastname"
+                        t-att-value="wizard.lastname"
+                        data-is-required="true"
+                    />
                 </t>
                 <!-- Firstname -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Firstname'" />
                     <t t-set="input_id" t-value="'firstname'" />
-                    <input id="firstname"
-                           type="text"
-                           name="firstname"
-                           t-att-value="wizard.firstname"
-                           data-is-required="true" />
+                    <input
+                        id="firstname"
+                        type="text"
+                        name="firstname"
+                        t-att-value="wizard.firstname"
+                        data-is-required="true"
+                    />
                 </t>
                 <!-- Date of birth -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Date of birth'" />
                     <t t-set="input_id" t-value="'birthdate'" />
-                    <input id="birthdate"
-                           type="date"
-                           name="birthdate"
-                           t-att-value="wizard.birthdate"
-                           data-is-required="true"/>
+                    <input
+                        id="birthdate"
+                        type="date"
+                        name="birthdate"
+                        t-att-value="wizard.birthdate"
+                        data-is-required="true"
+                    />
                 </t>
                 <!-- Email -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'E-mail'" />
                     <t t-set="input_id" t-value="'email'" />
-                    <input type="email" name="email" t-att-value="wizard.email"
-                           data-is-required="true"
-                           data-validate-type="email"/>
+                    <input
+                        type="email"
+                        name="email"
+                        t-att-value="wizard.email"
+                        data-is-required="true"
+                        data-validate-type="email"
+                    />
                 </t>
                 <!-- Phone -->
                 <t t-call="theme_compassion_2025.FormFieldComponent">
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label" t-value="'Phone number'" />
                     <t t-set="input_id" t-value="'phone'" />
-                    <input id="phone"
-                           type="tel"
-                           name="phone"
-                           t-att-value="wizard.phone"
-                           data-is-required="true"
-                           data-validate-type="phone" />
+                    <input
+                        id="phone"
+                        type="tel"
+                        name="phone"
+                        t-att-value="wizard.phone"
+                        data-is-required="true"
+                        data-validate-type="phone"
+                    />
                 </t>
                 <!-- Street -->
                 <div class="d-flex">
@@ -159,11 +171,13 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Street'" />
                             <t t-set="input_id" t-value="'street'" />
-                            <input id="street"
-                                   type="text"
-                                   name="street"
-                                   t-att-value="wizard.street"
-                                   data-is-required="true" />
+                            <input
+                                id="street"
+                                type="text"
+                                name="street"
+                                t-att-value="wizard.street"
+                                data-is-required="true"
+                            />
                         </t>
                     </div>
                     <div class="flex-shrink-1 ml-4">
@@ -176,7 +190,8 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                                 type="text"
                                 name="street_number"
                                 t-att-value="wizard.street_number"
-                                data-is-required="true" />
+                                data-is-required="true"
+                            />
                         </t>
                     </div>
                 </div>
@@ -187,11 +202,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Code'" />
                             <t t-set="input_id" t-value="'zip'" />
-                            <input id="zip"
-                                   type="text"
-                                   name="zip"
-                                   t-att-value="wizard.zip"
-                                   data-is-required="true" />
+                            <input id="zip" type="text" name="zip" t-att-value="wizard.zip" data-is-required="true" />
                         </t>
                     </div>
                     <div class="w-100 flex-grow-1">
@@ -199,11 +210,13 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                             <t t-set="top_class" t-value="'my-3'" />
                             <t t-set="label" t-value="'Locality'" />
                             <t t-set="input_id" t-value="'city'" />
-                            <input id="city"
-                                   type="text"
-                                   name="city"
-                                   t-att-value="wizard.city"
-                                   data-is-required="true" />
+                            <input
+                                id="city"
+                                type="text"
+                                name="city"
+                                t-att-value="wizard.city"
+                                data-is-required="true"
+                            />
                         </t>
                     </div>
                 </div>
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index f758117dd..60fdcacbd 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -23,24 +23,24 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     var validationConfig = {
         email: {
             regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-            defaultErrorMessage: "Please enter a valid email address."
+            defaultErrorMessage: "Please enter a valid email address.",
         },
         phone: {
             regex: /^\+?(\d[\d\s-]{5,}\d)$/,
-            defaultErrorMessage: "Please enter a valid phone number."
+            defaultErrorMessage: "Please enter a valid phone number.",
         },
         required: {
             suffix: '<span class="text-mid-orange">*</span>',
-            defaultErrorMessage: "This field is required."
-        }
-    }
+            defaultErrorMessage: "This field is required.",
+        },
+    };
 
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
         selector: ".form-field-component",
         events: {
-          "blur input": "_onBlur",
-          "change select": "_onBlur",
-          "blur select": "_onBlur",
+            "blur input": "_onBlur",
+            "change select": "_onBlur",
+            "blur select": "_onBlur",
         },
 
         init: function () {
@@ -69,10 +69,9 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 this.config = validationConfig[this.validationType];
             }
 
-
             this.errorMessages = {
                 required: this.$input.data("error-required") || validationConfig.required.defaultErrorMessage,
-                format: this.$input.data("error-format") || this.config?.defaultErrorMessage
+                format: this.$input.data("error-format") || this.config?.defaultErrorMessage,
             };
         },
 
@@ -96,7 +95,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 return false;
             }
 
-             if (this.validationType && value && this.config.regex) {
+            if (this.validationType && value && this.config.regex) {
                 if (!this.config.regex.test(value)) {
                     this._showError(this.errorMessages.format);
                     return false;
@@ -131,4 +130,4 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     });
 
     return publicWidget.registry.FormFieldValidator;
-});
\ No newline at end of file
+});
diff --git a/theme_compassion_2025/templates/components/FormField.xml b/theme_compassion_2025/templates/components/FormField.xml
index 4accfe415..839595dc1 100644
--- a/theme_compassion_2025/templates/components/FormField.xml
+++ b/theme_compassion_2025/templates/components/FormField.xml
@@ -13,7 +13,11 @@
 <odoo>
     <template id="FormFieldComponent" name="Form Field Component">
         <div t-attf-class="form-field-component #{top_class or ''}">
-            <label t-if="label" t-att-for="input_id" t-attf-class="text-#{label_color or 'core-blue'} body-small bold mb-1">
+            <label
+                t-if="label"
+                t-att-for="input_id"
+                t-attf-class="text-#{label_color or 'core-blue'} body-small bold mb-1"
+            >
                 <t t-esc="label" />
             </label>
             <t t-raw="0" />
diff --git a/theme_compassion_2025/templates/components/Select.xml b/theme_compassion_2025/templates/components/Select.xml
index 4e78e55c3..2cabf4abe 100644
--- a/theme_compassion_2025/templates/components/Select.xml
+++ b/theme_compassion_2025/templates/components/Select.xml
@@ -23,7 +23,13 @@
 <odoo>
     <template id="SelectComponent">
         <div class="SelectComponent">
-            <select t-attf-class="custom-select" t-att-name="name" t-att-id="id" t-att-required="required"  t-att-data-is-required="required">
+            <select
+                t-attf-class="custom-select"
+                t-att-name="name"
+                t-att-id="id"
+                t-att-required="required"
+                t-att-data-is-required="required"
+            >
                 <t t-raw="0" />
             </select>
             <span class="select-divider" />

From fda444ee64c52577573c12dce7123681a06f572a Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Wed, 17 Dec 2025 14:16:26 +0100
Subject: [PATCH 19/37] [T2591] FEAT: make validation available globally for
 my_compassion 2.0

---
 my_compassion/static/src/css/global.css       | 10 +++++++++
 .../src/css/my2_new_sponsorship_wizard.css    |  5 -----
 .../pages/my2_new_sponsorship_wizard.xml      | 21 +++++++++++++++----
 .../static/src/utils/form_field_validator.js  |  3 ++-
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/my_compassion/static/src/css/global.css b/my_compassion/static/src/css/global.css
index 783205fb2..17529cde7 100644
--- a/my_compassion/static/src/css/global.css
+++ b/my_compassion/static/src/css/global.css
@@ -116,3 +116,13 @@ h1 {
     outline: none; /* Remove default outline */
     box-shadow: 0 0 10px rgba(74, 166, 246, 0.5); /* Glow effect */
 }
+
+/*
+   Global form validation styles
+   Applied to all form fields marked as invalid (`.is-invalid`)
+   within `.form-field-component` across the entire MyCompassion app.
+ */
+.form-field-component .is-invalid {
+    border: 1px solid var(--mid-orange);
+    border-left: 5px solid var(--mid-orange);
+}
diff --git a/my_compassion/static/src/css/my2_new_sponsorship_wizard.css b/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
index d1b3c53e1..19d63ccc8 100644
--- a/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
+++ b/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
@@ -90,11 +90,6 @@
     margin-right: auto;
 }
 
-.new-sponsorship-wizard-form .is-invalid {
-    border: 1px solid var(--mid-orange);
-    border-left: 5px solid var(--mid-orange);
-}
-
 .thank-you-child-profile {
     max-width: 350px;
 }
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index aabb5e092..71e601837 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -116,16 +116,29 @@ Page: My Compassion 2 New Sponsorship Wizard Page
         <!-- Email -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
             <t t-set="top_class" t-value="'my-3'" />
-            <t t-set="label">E-mail</t>
+            <t t-set="label" t-value="'E-mail'" />
             <t t-set="input_id" t-value="'email'" />
-            <input id="email" type="email" name="email" t-att-value="wizard.email" required="" />
+            <input
+                type="email"
+                name="email"
+                t-att-value="wizard.email"
+                data-validate-type="email"
+                required=""
+            />
         </t>
         <!-- Phone -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
             <t t-set="top_class" t-value="'my-3'" />
-            <t t-set="label">Phone number</t>
+            <t t-set="label" t-value="'Phone number'" />
             <t t-set="input_id" t-value="'phone'" />
-            <input id="phone" type="tel" name="phone" t-att-value="wizard.phone" required="" />
+            <input
+                id="phone"
+                type="tel"
+                name="phone"
+                t-att-value="wizard.phone"
+                data-is-required="true"
+                data-validate-type="phone"
+            />
         </t>
         <!-- Street -->
         <div class="d-flex">
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 60fdcacbd..4e2e49b1f 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -58,7 +58,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
             this.$el.data("widget", this);
 
             this.$input = this.$("input, select");
-            this.isRequired = this.$input.data("is-required");
+            this.isRequired = this.$input.prop("required");
             this.validationType = this.$input.data("validate-type");
 
             if (this.isRequired) {
@@ -87,6 +87,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          * @returns {boolean}
          */
         validate: function () {
+            console.log("Validating field:", this.$input.attr("name"));
             this._clearError();
             var value = this.$input.val();
 

From c55696df11e367aac815f78b3ae55fe6fda8474d Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Mon, 22 Dec 2025 16:10:58 +0100
Subject: [PATCH 20/37] [T2591] FEAT: validate user settings

---
 my_compassion/static/src/css/global.css       |  3 ++
 .../src/css/my2_new_sponsorship_wizard.css    |  4 +--
 .../static/src/js/my2_user_settings.js        | 29 ++++++++++---------
 .../pages/my2_new_sponsorship_wizard.xml      | 15 ++++++----
 .../templates/pages/my2_user_settings.xml     | 12 ++++++++
 .../static/src/utils/form_field_validator.js  | 14 ++++-----
 6 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/my_compassion/static/src/css/global.css b/my_compassion/static/src/css/global.css
index 17529cde7..7155b09a0 100644
--- a/my_compassion/static/src/css/global.css
+++ b/my_compassion/static/src/css/global.css
@@ -125,4 +125,7 @@ h1 {
 .form-field-component .is-invalid {
     border: 1px solid var(--mid-orange);
     border-left: 5px solid var(--mid-orange);
+    /* override bootstrap invalid style */
+    background-image: none;
+    padding-right: 0.75rem;
 }
diff --git a/my_compassion/static/src/css/my2_new_sponsorship_wizard.css b/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
index 19d63ccc8..706c36de0 100644
--- a/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
+++ b/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
@@ -50,14 +50,14 @@
     border: 0.65rem solid;
 }
 
-.new-sponsorship-wizard-form input {
+/*.new-sponsorship-wizard-form input {
     width: 100%;
     height: 2.6rem;
     border-radius: 5px;
     border: 1px solid var(--mid-grey);
     padding-left: 10px;
     padding-right: 10px;
-}
+}*/
 
 .new-sponsorship-wizard-form input[type="checkbox"] {
     width: 1.4rem;
diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 0d693ed12..83366cd0f 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -289,17 +289,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
             let originalValues = {};
 
-            const clearErrors = () => {
-                form.querySelectorAll(".is-invalid").forEach((input) => {
-                    input.classList.remove("is-invalid");
-                });
-                form.querySelectorAll(".invalid-hint").forEach((hint) => {
-                    hint.style.display = "none";
-                });
-            };
-
             const showErrors = (errors) => {
-                for (const fieldName in errors) {
+             for (const fieldName in errors) {
                     const input = form.querySelector(`[name="${fieldName}"]`);
                     if (input) {
                         input.classList.add("is-invalid");
@@ -314,7 +305,21 @@ document.addEventListener("DOMContentLoaded", () => {
                     }
                 }
             };
+const validateForm = () => {
+    let isValid = true;
+
+    $(form).find(".form-field-component:visible").each(function () {
+        const fieldWidget = $(this).data("widget");
+
+        if (fieldWidget && typeof fieldWidget.validate === "function") {
+            if (!fieldWidget.validate()) {
+                isValid = false;
+            }
+        }
+    });
 
+    return isValid;
+};
             const storeOriginalValues = () => {
                 fields.forEach((field) => {
                     const input = form.querySelector(`[name="${field}"]`);
@@ -333,18 +338,16 @@ document.addEventListener("DOMContentLoaded", () => {
 
             editButton.addEventListener("click", () => {
                 storeOriginalValues();
-                clearErrors();
                 form.classList.add("is-editing");
             });
 
             cancelButton.addEventListener("click", () => {
                 restoreOriginalValues();
-                clearErrors();
                 form.classList.remove("is-editing");
             });
 
             saveButton.addEventListener("click", () => {
-                clearErrors();
+                validateForm();
                 const payload = {};
                 fields.forEach((field) => {
                     const input = form.querySelector(`[name="${field}"]`);
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 71e601837..d1dd112de 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -97,21 +97,21 @@ Page: My Compassion 2 New Sponsorship Wizard Page
             <t t-set="top_class" t-value="'my-3'" />
             <t t-set="label">Surname</t>
             <t t-set="input_id" t-value="'lastname'" />
-            <input id="lastname" type="text" name="lastname" t-att-value="wizard.lastname" required="" />
+            <input id="lastname" type="text" name="lastname" class="form-control" t-att-value="wizard.lastname" required="" />
         </t>
         <!-- Firstname -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
             <t t-set="top_class" t-value="'my-3'" />
             <t t-set="label">Firstname</t>
             <t t-set="input_id" t-value="'firstname'" />
-            <input id="firstname" type="text" name="firstname" t-att-value="wizard.firstname" required="" />
+            <input id="firstname" type="text" name="firstname" class="form-control" t-att-value="wizard.firstname" required="" />
         </t>
         <!-- Date of birth -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
             <t t-set="top_class" t-value="'my-3'" />
             <t t-set="label">Date of birth</t>
             <t t-set="input_id" t-value="'birthdate'" />
-            <input id="birthdate" type="date" name="birthdate" t-att-value="wizard.birthdate" required="" />
+            <input id="birthdate" type="date" name="birthdate" class="form-control" t-att-value="wizard.birthdate" required="" />
         </t>
         <!-- Email -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
@@ -121,6 +121,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
             <input
                 type="email"
                 name="email"
+                class="form-control"
                 t-att-value="wizard.email"
                 data-validate-type="email"
                 required=""
@@ -135,6 +136,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                 id="phone"
                 type="tel"
                 name="phone"
+                class="form-control"
                 t-att-value="wizard.phone"
                 data-is-required="true"
                 data-validate-type="phone"
@@ -147,7 +149,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label">Street</t>
                     <t t-set="input_id" t-value="'street'" />
-                    <input id="street" type="text" name="street" t-att-value="wizard.street" required="" />
+                    <input id="street" type="text" name="street" class="form-control" t-att-value="wizard.street" required="" />
                 </t>
             </div>
             <div class="flex-shrink-1 ml-4">
@@ -159,6 +161,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                         id="street_number"
                         type="text"
                         name="street_number"
+                        class="form-control"
                         t-att-value="wizard.street_number"
                         required=""
                     />
@@ -172,7 +175,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label">Code</t>
                     <t t-set="input_id" t-value="'zip'" />
-                    <input id="zip" type="text" name="zip" t-att-value="wizard.zip" required="" />
+                    <input id="zip" type="text" name="zip" class="form-control" t-att-value="wizard.zip" required="" />
                 </t>
             </div>
             <div class="w-100 flex-grow-1">
@@ -180,7 +183,7 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label">Locality</t>
                     <t t-set="input_id" t-value="'city'" />
-                    <input id="city" type="text" name="city" t-att-value="wizard.city" required="" />
+                    <input id="city" type="text" name="city" class="form-control" t-att-value="wizard.city" required="" />
                 </t>
             </div>
         </div>
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index c33a93588..4ce93016d 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -92,6 +92,7 @@ Injected data:
                                                 <t t-call="theme_compassion_2025.SelectComponent">
                                                     <t t-set="id" t-value="'title'" />
                                                     <t t-set="name" t-value="'title'" />
+                                                    <t t-set="required" t-value="True" />
                                                     <t
                                                         t-set="attrs"
                                                         t-value="{'data-original-value': partner.title.id}"
@@ -125,6 +126,7 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.lastname"
                                                     t-att-data-original-value="partner.lastname"
+                                                    required=""
                                                 />
                                             </div>
                                         </t>
@@ -144,6 +146,7 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.firstname"
                                                     t-att-data-original-value="partner.firstname"
+                                                    required=""
                                                 />
                                             </div>
                                         </t>
@@ -165,6 +168,7 @@ Injected data:
                                                 class="form-control"
                                                 t-att-value="partner.street"
                                                 t-att-data-original-value="partner.street"
+                                                required=""
                                             />
                                         </div>
                                     </t>
@@ -186,6 +190,7 @@ Injected data:
                                                         class="form-control"
                                                         t-att-value="partner.zip"
                                                         t-att-data-original-value="partner.zip"
+                                                        required=""
                                                     />
                                                 </div>
                                             </t>
@@ -206,6 +211,7 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.city"
                                                     t-att-data-original-value="partner.city"
+                                                    required=""
                                                 />
                                             </div>
                                         </t>
@@ -255,6 +261,8 @@ Injected data:
                                                 class="form-control"
                                                 t-att-value="partner.email"
                                                 t-att-data-original-value="partner.email"
+                                                data-validate-type="email"
+                                                required=""
                                             />
                                         </div>
                                     </t>
@@ -275,6 +283,8 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.phone"
                                                     t-att-data-original-value="partner.phone"
+                                                    data-validate-type="phone"
+                                                    required=""
                                                 />
                                             </div>
                                         </t>
@@ -294,6 +304,8 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.mobile"
                                                     t-att-data-original-value="partner.mobile"
+                                                    data-validate-type="phone"
+                                                    required=""
                                                 />
                                             </div>
                                         </t>
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 4e2e49b1f..6e680275e 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -21,6 +21,10 @@ odoo.define("my_compassion.form_field_validator", function (require) {
     var publicWidget = require("web.public.widget");
 
     var validationConfig = {
+        required: {
+            suffix: '<span class="text-mid-orange">*</span>',
+            defaultErrorMessage: "This field is required.",
+        },
         email: {
             regex: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
             defaultErrorMessage: "Please enter a valid email address.",
@@ -29,10 +33,6 @@ odoo.define("my_compassion.form_field_validator", function (require) {
             regex: /^\+?(\d[\d\s-]{5,}\d)$/,
             defaultErrorMessage: "Please enter a valid phone number.",
         },
-        required: {
-            suffix: '<span class="text-mid-orange">*</span>',
-            defaultErrorMessage: "This field is required.",
-        },
     };
 
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({
@@ -111,13 +111,13 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          */
         _showError: function (message) {
             this.$input.addClass("is-invalid");
-            var $errorHint = $('<div class="input-invalid-hint text-mid-orange tiny-text mb-1">').text(message);
+            var $errorHint = $('<div class="input-invalid-hint text-mid-orange tiny-text mt-2">').text(message);
 
             var $selectContainer = this.$input.closest(".SelectComponent");
             if ($selectContainer.length > 0) {
-                $selectContainer.before($errorHint);
+                $selectContainer.after($errorHint);
             } else {
-                this.$input.before($errorHint);
+                this.$input.after($errorHint);
             }
         },
 

From 026fcd45ffa4d436c14d8d802ac524ec0f0bb7bf Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 23 Dec 2025 12:05:49 +0100
Subject: [PATCH 21/37] [T2591] FEAT: append backend error to specific  field

---
 .../static/src/js/my2_user_settings.js        | 65 +++++++++++--------
 .../static/src/utils/form_field_validator.js  | 25 ++++---
 2 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 83366cd0f..de8305e42 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -289,37 +289,44 @@ document.addEventListener("DOMContentLoaded", () => {
 
             let originalValues = {};
 
-            const showErrors = (errors) => {
-             for (const fieldName in errors) {
+            const showBackendErrors = (errors) => {
+                for (const fieldName in errors) {
                     const input = form.querySelector(`[name="${fieldName}"]`);
-                    if (input) {
-                        input.classList.add("is-invalid");
-                        const container = input.closest(".form-field-container");
-                        if (container) {
-                            const hintEl = container.querySelector(".invalid-hint");
-                            if (hintEl) {
-                                hintEl.textContent = errors[fieldName];
-                                hintEl.style.display = "block";
-                            }
-                        }
-                    }
+                    if (!input) continue;
+
+                    const fieldComponent = input.closest(".form-field-component");
+                    if (!fieldComponent) continue;
+
+                    const fieldWidget = $(fieldComponent).data("widget");
+                    if (!fieldWidget) continue;
+
+                    fieldWidget.showError(errors[fieldName]);
                 }
             };
-const validateForm = () => {
-    let isValid = true;
 
-    $(form).find(".form-field-component:visible").each(function () {
-        const fieldWidget = $(this).data("widget");
+            const clearErrors = () => {
+                let isValid = true;
 
-        if (fieldWidget && typeof fieldWidget.validate === "function") {
-            if (!fieldWidget.validate()) {
-                isValid = false;
-            }
-        }
-    });
+                $(form).find(".form-field-component:visible").each(function () {
+                    const fieldWidget = $(this).data("widget");
+                    fieldWidget.clearError()
+                });
+
+                return isValid;
+            };
+            const validateForm = () => {
+                let isValid = true;
 
-    return isValid;
-};
+                $(form).find(".form-field-component:visible").each(function () {
+                    const fieldWidget = $(this).data("widget");
+
+                    if (!fieldWidget.validate()) {
+                        isValid = false;
+                    }
+                });
+
+                return isValid;
+            };
             const storeOriginalValues = () => {
                 fields.forEach((field) => {
                     const input = form.querySelector(`[name="${field}"]`);
@@ -338,16 +345,20 @@ const validateForm = () => {
 
             editButton.addEventListener("click", () => {
                 storeOriginalValues();
+                clearErrors();
                 form.classList.add("is-editing");
             });
 
             cancelButton.addEventListener("click", () => {
                 restoreOriginalValues();
+                clearErrors();
                 form.classList.remove("is-editing");
             });
 
             saveButton.addEventListener("click", () => {
-                validateForm();
+                if (!validateForm()) {
+                    return;
+                }
                 const payload = {};
                 fields.forEach((field) => {
                     const input = form.querySelector(`[name="${field}"]`);
@@ -368,7 +379,7 @@ const validateForm = () => {
                             form.classList.remove("is-editing");
                         } else {
                             if (response.errors) {
-                                showErrors(response.errors);
+                                showBackendErrors(response.errors);
                             }
                         }
                     })
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 6e680275e..b95d43405 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -87,29 +87,34 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          * @returns {boolean}
          */
         validate: function () {
-            console.log("Validating field:", this.$input.attr("name"));
-            this._clearError();
+            this.clearError();
             var value = this.$input.val();
 
             if (this.isRequired && !value) {
-                this._showError(this.errorMessages.required);
+                this.showError(this.errorMessages.required);
                 return false;
             }
 
             if (this.validationType && value && this.config.regex) {
                 if (!this.config.regex.test(value)) {
-                    this._showError(this.errorMessages.format);
+                    this.showError(this.errorMessages.format);
                     return false;
                 }
             }
 
             return true;
         },
-
+        /**
+         * Removes existing error messages.
+         */
+        clearError: function () {
+            this.$el.find(".input-invalid-hint").remove();
+            this.$input.removeClass("is-invalid");
+        },
         /**
          * Displays an error message.
          */
-        _showError: function (message) {
+        showError: function (message) {
             this.$input.addClass("is-invalid");
             var $errorHint = $('<div class="input-invalid-hint text-mid-orange tiny-text mt-2">').text(message);
 
@@ -120,14 +125,6 @@ odoo.define("my_compassion.form_field_validator", function (require) {
                 this.$input.after($errorHint);
             }
         },
-
-        /**
-         * Removes existing error messages.
-         */
-        _clearError: function () {
-            this.$el.find(".input-invalid-hint").remove();
-            this.$input.removeClass("is-invalid");
-        },
     });
 
     return publicWidget.registry.FormFieldValidator;

From b6ebcf313194b7ac506bd5a97973776233610d3f Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 23 Dec 2025 12:16:24 +0100
Subject: [PATCH 22/37] [T2591] REFACTOR: pre-commit

---
 .../static/src/js/my2_user_settings.js        | 24 +++++-----
 .../pages/my2_new_sponsorship_wizard.xml      | 45 ++++++++++++++++---
 .../static/description/index.html             |  4 +-
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index de8305e42..60110bcfb 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -307,23 +307,27 @@ document.addEventListener("DOMContentLoaded", () => {
             const clearErrors = () => {
                 let isValid = true;
 
-                $(form).find(".form-field-component:visible").each(function () {
-                    const fieldWidget = $(this).data("widget");
-                    fieldWidget.clearError()
-                });
+                $(form)
+                    .find(".form-field-component:visible")
+                    .each(function () {
+                        const fieldWidget = $(this).data("widget");
+                        fieldWidget.clearError();
+                    });
 
                 return isValid;
             };
             const validateForm = () => {
                 let isValid = true;
 
-                $(form).find(".form-field-component:visible").each(function () {
-                    const fieldWidget = $(this).data("widget");
+                $(form)
+                    .find(".form-field-component:visible")
+                    .each(function () {
+                        const fieldWidget = $(this).data("widget");
 
-                    if (!fieldWidget.validate()) {
-                        isValid = false;
-                    }
-                });
+                        if (!fieldWidget.validate()) {
+                            isValid = false;
+                        }
+                    });
 
                 return isValid;
             };
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index d1dd112de..267348a81 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -97,21 +97,42 @@ Page: My Compassion 2 New Sponsorship Wizard Page
             <t t-set="top_class" t-value="'my-3'" />
             <t t-set="label">Surname</t>
             <t t-set="input_id" t-value="'lastname'" />
-            <input id="lastname" type="text" name="lastname" class="form-control" t-att-value="wizard.lastname" required="" />
+            <input
+                id="lastname"
+                type="text"
+                name="lastname"
+                class="form-control"
+                t-att-value="wizard.lastname"
+                required=""
+            />
         </t>
         <!-- Firstname -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
             <t t-set="top_class" t-value="'my-3'" />
             <t t-set="label">Firstname</t>
             <t t-set="input_id" t-value="'firstname'" />
-            <input id="firstname" type="text" name="firstname" class="form-control" t-att-value="wizard.firstname" required="" />
+            <input
+                id="firstname"
+                type="text"
+                name="firstname"
+                class="form-control"
+                t-att-value="wizard.firstname"
+                required=""
+            />
         </t>
         <!-- Date of birth -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
             <t t-set="top_class" t-value="'my-3'" />
             <t t-set="label">Date of birth</t>
             <t t-set="input_id" t-value="'birthdate'" />
-            <input id="birthdate" type="date" name="birthdate" class="form-control" t-att-value="wizard.birthdate" required="" />
+            <input
+                id="birthdate"
+                type="date"
+                name="birthdate"
+                class="form-control"
+                t-att-value="wizard.birthdate"
+                required=""
+            />
         </t>
         <!-- Email -->
         <t t-call="theme_compassion_2025.FormFieldComponent">
@@ -149,7 +170,14 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label">Street</t>
                     <t t-set="input_id" t-value="'street'" />
-                    <input id="street" type="text" name="street" class="form-control" t-att-value="wizard.street" required="" />
+                    <input
+                        id="street"
+                        type="text"
+                        name="street"
+                        class="form-control"
+                        t-att-value="wizard.street"
+                        required=""
+                    />
                 </t>
             </div>
             <div class="flex-shrink-1 ml-4">
@@ -183,7 +211,14 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                     <t t-set="top_class" t-value="'my-3'" />
                     <t t-set="label">Locality</t>
                     <t t-set="input_id" t-value="'city'" />
-                    <input id="city" type="text" name="city" class="form-control" t-att-value="wizard.city" required="" />
+                    <input
+                        id="city"
+                        type="text"
+                        name="city"
+                        class="form-control"
+                        t-att-value="wizard.city"
+                        required=""
+                    />
                 </t>
             </div>
         </div>
diff --git a/website_sponsorship/static/description/index.html b/website_sponsorship/static/description/index.html
index a9baae0a0..a6dcd7a23 100644
--- a/website_sponsorship/static/description/index.html
+++ b/website_sponsorship/static/description/index.html
@@ -390,8 +390,8 @@ <h1 class="title">Website - Sponsor a child form</h1>
 <div class="section" id="configuration">
 <h1><a class="toc-backref" href="#toc-entry-1">Configuration</a></h1>
 <ul class="simple">
-<li>You can go on the website and edit the page templates in order to
-make sure it fits your needs and design guidelines.</li>
+<li>You can go on the website and edit the page templates in order to make
+sure it fits your needs and design guidelines.</li>
 <li>Under Sponsorship/Settings/Personal Data Agreement, you should create
 a page for displaying the general terms that have to be accepted upon
 making a new sponsorship.</li>

From 5931adaea58aee16a4829cc599ab9791d6ade5cc Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 23 Dec 2025 12:18:20 +0100
Subject: [PATCH 23/37] [T2591] REFACTOR: remove unnecessary css invalid class
 specified only for sponsorship-wizard

---
 .../static/src/css/my2_new_sponsorship_wizard.css        | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/my_compassion/static/src/css/my2_new_sponsorship_wizard.css b/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
index 706c36de0..4bed910f4 100644
--- a/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
+++ b/my_compassion/static/src/css/my2_new_sponsorship_wizard.css
@@ -50,15 +50,6 @@
     border: 0.65rem solid;
 }
 
-/*.new-sponsorship-wizard-form input {
-    width: 100%;
-    height: 2.6rem;
-    border-radius: 5px;
-    border: 1px solid var(--mid-grey);
-    padding-left: 10px;
-    padding-right: 10px;
-}*/
-
 .new-sponsorship-wizard-form input[type="checkbox"] {
     width: 1.4rem;
     height: 1.4rem;

From 3ed155c5c50692d45e7c7226a5b2f3e850e8d8b0 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 23 Dec 2025 12:26:26 +0100
Subject: [PATCH 24/37] [T2591] REFACTOR: kabab case to camel cas in data DOM
 object

---
 .../static/src/utils/form_field_validator.js               | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index b95d43405..275430ca8 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -40,7 +40,6 @@ odoo.define("my_compassion.form_field_validator", function (require) {
         events: {
             "blur input": "_onBlur",
             "change select": "_onBlur",
-            "blur select": "_onBlur",
         },
 
         init: function () {
@@ -59,7 +58,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
 
             this.$input = this.$("input, select");
             this.isRequired = this.$input.prop("required");
-            this.validationType = this.$input.data("validate-type");
+            this.validationType = this.$input.data("validateType");
 
             if (this.isRequired) {
                 this.$el.find("label").append(validationConfig.required.suffix);
@@ -70,8 +69,8 @@ odoo.define("my_compassion.form_field_validator", function (require) {
             }
 
             this.errorMessages = {
-                required: this.$input.data("error-required") || validationConfig.required.defaultErrorMessage,
-                format: this.$input.data("error-format") || this.config?.defaultErrorMessage,
+                required: this.$input.data("errorRequired") || validationConfig.required.defaultErrorMessage,
+                format: this.$input.data("errorFormat") || this.config?.defaultErrorMessage,
             };
         },
 

From 3e316525688c04d82bbabb21b80b33779f791a9d Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 23 Dec 2025 14:06:08 +0100
Subject: [PATCH 25/37] [T2591] REFACTOR: pre-commit

---
 theme_compassion_2025/static/src/utils/form_field_validator.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 275430ca8..fa07cf802 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -70,7 +70,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
 
             this.errorMessages = {
                 required: this.$input.data("errorRequired") || validationConfig.required.defaultErrorMessage,
-                format: this.$input.data("errorFormat") || this.config?.defaultErrorMessage,
+                format: this.$input.data("errorFormat") || (this.config && this.config.defaultErrorMessage),
             };
         },
 

From 4ca9cd93af5f783b689923c0948ff4559177afc3 Mon Sep 17 00:00:00 2001
From: EliasKeller <elias.keller@gmail.com>
Date: Tue, 23 Dec 2025 14:11:28 +0100
Subject: [PATCH 26/37] [T2591] REFACTOR: pre-commit

---
 theme_compassion_2025/static/src/utils/form_field_validator.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index fa07cf802..d3e63d522 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -83,7 +83,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
 
         /**
          * The central validation function. Can also be called externally.
-         * @returns {boolean}
+         * @returns {Boolean}
          */
         validate: function () {
             this.clearError();

From 94e881fe50c35049f334860ad872e1c9a86f4b9b Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Wed, 21 Jan 2026 18:10:48 +0100
Subject: [PATCH 27/37] [T2902] REFACTOR: adapting FormField to display
 client-side validation messages

# FEATURE: Added (optional) display content and edit field tags to the FormField
# REFACTOR: Adapted last and firstname form fields to be compatible with new FormField
# REFACTOR: Changed form from generic <div> to a better suited <form>
# REFACTOR: Added e.preventDefault() to button event handlers to prevent automatic submission of form when clicking a button
---
 .../static/src/js/my2_user_settings.js        |  9 ++--
 .../templates/pages/my2_user_settings.xml     | 45 ++++++++++---------
 .../templates/components/FormField.xml        | 28 +++++++-----
 3 files changed, 49 insertions(+), 33 deletions(-)

diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 0d693ed12..9137e13b0 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -331,19 +331,22 @@ document.addEventListener("DOMContentLoaded", () => {
                 });
             };
 
-            editButton.addEventListener("click", () => {
+            editButton.addEventListener("click", (e) => {
+                e.preventDefault();
                 storeOriginalValues();
                 clearErrors();
                 form.classList.add("is-editing");
             });
 
-            cancelButton.addEventListener("click", () => {
+            cancelButton.addEventListener("click", (e) => {
+                e.preventDefault();
                 restoreOriginalValues();
                 clearErrors();
                 form.classList.remove("is-editing");
             });
 
-            saveButton.addEventListener("click", () => {
+            saveButton.addEventListener("click", (e) => {
+                e.preventDefault();
                 clearErrors();
                 const payload = {};
                 fields.forEach((field) => {
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index a2d25d31b..12a3f555a 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -71,7 +71,7 @@ Injected data:
                     <div class="single-column tab-content pt-4" id="UserSettingsTabContent">
                         <!-- Personal info tab -->
                         <div class="tab-pane fade" id="personal-information" role="tabpanel">
-                            <div id="personal-information-form" class="bg-pure-white col-md-12 col-sm-12">
+                            <form id="personal-information-form" class="bg-pure-white col-md-12 col-sm-12" novalidate="novalidate">
                                 <div class="row col-12 mb-3">
                                     <t t-call="theme_compassion_2025.FormFieldComponent">
                                         <t t-set="label">My reference</t>
@@ -114,29 +114,34 @@ Injected data:
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Surname</t>
                                             <t t-set="input_id" t-value="'lastname'" />
-                                            <div class="field-display" data-display-for="lastname">
-                                                <t t-esc="partner.lastname or ''" />
-                                            </div>
-                                            <div class="field-edit">
-                                                <input
-                                                    type="text"
-                                                    id="lastname"
-                                                    name="lastname"
-                                                    class="form-control"
-                                                    t-att-value="partner.lastname"
-                                                    t-att-data-original-value="partner.lastname"
-                                                />
-                                            </div>
+                                            <t t-set="invalid_hint">Surname can not be emtpy</t>
+                                            <t t-set="display_content">
+                                                <div class="field-display" data-display-for="lastname">
+                                                    <t t-esc="partner.lastname or ''" />
+                                                </div>
+                                            </t>
+                                            <t t-set="edit_field" t-value="True"/>
+                                            <input
+                                                type="text"
+                                                id="lastname"
+                                                name="lastname"
+                                                class="form-control"
+                                                t-att-value="partner.lastname"
+                                                required="required"
+                                            />
                                         </t>
                                     </div>
                                     <div class="col-md-6 mb-3">
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Name</t>
                                             <t t-set="input_id" t-value="'firstname'" />
-                                            <div class="field-display" data-display-for="firstname">
-                                                <t t-esc="partner.firstname or ''" />
-                                            </div>
-                                            <div class="field-edit">
+                                            <t t-set="invalid_hint">Name can not be emtpy</t>
+                                            <t t-set="display_content">
+                                                <div class="field-display" data-display-for="firstname">
+                                                    <t t-esc="partner.firstname or ''" />
+                                                </div>
+                                            </t>
+                                            <t t-set="edit_field" t-value="True"/>
                                                 <input
                                                     type="text"
                                                     id="firstname"
@@ -144,8 +149,8 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.firstname"
                                                     t-att-data-original-value="partner.firstname"
+                                                    required="required"
                                                 />
-                                            </div>
                                         </t>
                                     </div>
                                 </div>
@@ -334,7 +339,7 @@ Injected data:
                                         </a>
                                     </div>
                                 </div>
-                            </div>
+                            </form>
                         </div>
                         <!-- Account settings tab -->
                         <div class="tab-pane fade" id="account-settings" role="tabpanel">
diff --git a/theme_compassion_2025/templates/components/FormField.xml b/theme_compassion_2025/templates/components/FormField.xml
index 601bafc7a..fc91f6bc9 100644
--- a/theme_compassion_2025/templates/components/FormField.xml
+++ b/theme_compassion_2025/templates/components/FormField.xml
@@ -13,22 +13,30 @@
 -->
 <odoo>
     <template id="FormFieldComponent" name="Form Field Component">
-        <t t-set="invalid_hint">
-            <t t-if="invalid_hint">
-                <t t-esc="invalid_hint" />
-            </t>
-            <t t-else="">Invalid value.</t>
-        </t>
+        <t t-set="final_invalid_hint" t-value="invalid_hint or 'Invalid value.'" />
         <div t-attf-class="form-field-container #{top_class}">
             <t t-if="label">
                 <label t-att-for="input_id" t-attf-class="text-#{label_color or 'core-blue'} body-small bold mb-1">
                     <t t-esc="label" />
                 </label>
             </t>
-            <div class="invalid-hint text-mid-orange tiny-text mb-1">
-                <t t-esc="invalid_hint" />
-            </div>
-            <t t-raw="0" />
+            <t t-if="display_content">
+                <t t-raw="display_content"/>
+            </t>
+            <t t-if="edit_field">
+                <div class="field-edit">
+                    <t t-raw="0" />
+                    <div class="invalid-feedback text-mid-orange tiny-text mb-1">
+                        <t t-esc="final_invalid_hint" />
+                     </div>
+                </div>
+            </t>
+            <t t-else="">
+                <div class="invalid-feedback text-mid-orange tiny-text mb-1">
+                    <t t-esc="final_invalid_hint" />
+                </div>
+                <t t-raw="0" />
+            </t>
         </div>
     </template>
 </odoo>

From a6725e05dcb9588a776666c4a318f611f8ca8734 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Thu, 22 Jan 2026 15:17:11 +0100
Subject: [PATCH 28/37] [T2902] REFACTOR: form validation for settings page
 complete

# REFACTOR: Added validation to all form fields
# REFACTOR: Changed clearErrors to clearValidations -> my_user_settings.js
# REFACTOR: Added validation check event listener to input fields
---
 .../static/src/js/my2_user_settings.js        | 67 ++++++++++++++---
 .../templates/pages/my2_user_settings.xml     | 75 ++++++++++++-------
 2 files changed, 105 insertions(+), 37 deletions(-)

diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 9137e13b0..67172fc89 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -289,11 +289,14 @@ document.addEventListener("DOMContentLoaded", () => {
 
             let originalValues = {};
 
-            const clearErrors = () => {
-                form.querySelectorAll(".is-invalid").forEach((input) => {
+            const clearValidation = () => {
+                form.querySelectorAll(".is-invalid, .is-valid").forEach((input) => {
                     input.classList.remove("is-invalid");
+                    input.classList.remove("is-valid");
+                    const container = input.closest(".form-field-container");
+                    if (container) container.classList.remove("has-error");
                 });
-                form.querySelectorAll(".invalid-hint").forEach((hint) => {
+                form.querySelectorAll(".invalid-feedback").forEach((hint) => {
                     hint.style.display = "none";
                 });
             };
@@ -302,10 +305,12 @@ document.addEventListener("DOMContentLoaded", () => {
                 for (const fieldName in errors) {
                     const input = form.querySelector(`[name="${fieldName}"]`);
                     if (input) {
+                        input.classList.remove("is-valid");
                         input.classList.add("is-invalid");
                         const container = input.closest(".form-field-container");
                         if (container) {
-                            const hintEl = container.querySelector(".invalid-hint");
+                            container.classList.add("has-error");
+                            const hintEl = container.querySelector(".invalid-feedback");
                             if (hintEl) {
                                 hintEl.textContent = errors[fieldName];
                                 hintEl.style.display = "block";
@@ -331,28 +336,70 @@ document.addEventListener("DOMContentLoaded", () => {
                 });
             };
 
+            // Validation listener on all input fields
+            form.querySelectorAll(".form-control").forEach((input) => {
+                input.addEventListener("input", function () {
+
+                    if (!form.classList.contains("is-editing")) return;
+
+                    if (this.checkValidity()) {
+                        this.classList.remove("is-invalid");
+                        const container = this.closest(".form-field-container");
+                        if (container) container.classList.remove("has-error");
+                        this.classList.add("is-valid");
+                        const hintEl = container.querySelector(".invalid-feedback");
+                        if (hintEl) hintEl.style.display = "none";
+                    } else {
+                        this.classList.remove("is-valid");
+                    }
+                })
+            })
+
             editButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 storeOriginalValues();
-                clearErrors();
+                clearValidation();
                 form.classList.add("is-editing");
             });
 
             cancelButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 restoreOriginalValues();
-                clearErrors();
+                clearValidation();
                 form.classList.remove("is-editing");
             });
 
             saveButton.addEventListener("click", (e) => {
                 e.preventDefault();
-                clearErrors();
+                clearValidation();
+
+                let isValid = true;
                 const payload = {};
-                fields.forEach((field) => {
+
+                for (let i = 0; i < fields.length; i++) {
+                    const field = fields[i];
                     const input = form.querySelector(`[name="${field}"]`);
-                    if (input) payload[field] = input.value;
-                });
+
+                    if (!input || input.offsetParent === null) continue; // Skip hidden/missing inputs
+
+                    if (!input.checkValidity()) { // input not valid
+                        isValid = false;
+
+                        input.classList.remove("is-valid");
+                        input.classList.add("is-invalid");
+
+                        const container = input.closest(".form-field-container");
+                        if (container) container.classList.add("has-error");
+                        const hintEl = container.querySelector(".invalid-feedback");
+                        if (hintEl) hintEl.style.display = "block";
+                    } else { // input valid
+                        input.classList.remove("is-invalid");
+                        input.classList.add("is-valid");
+                        payload[field] = input.value;
+                    }
+                }
+
+                if (!isValid) return; // return if any of the input values are not valid
 
                 rpc.query({ route: endpoint, params: payload })
                     .then((response) => {
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 12a3f555a..7f1131e26 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -114,7 +114,7 @@ Injected data:
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Surname</t>
                                             <t t-set="input_id" t-value="'lastname'" />
-                                            <t t-set="invalid_hint">Surname can not be emtpy</t>
+                                            <t t-set="invalid_hint">Surname is required (max 50 characters)</t>
                                             <t t-set="display_content">
                                                 <div class="field-display" data-display-for="lastname">
                                                     <t t-esc="partner.lastname or ''" />
@@ -128,6 +128,7 @@ Injected data:
                                                 class="form-control"
                                                 t-att-value="partner.lastname"
                                                 required="required"
+                                                pattern="[a-zA-Z]{0,50}"
                                             />
                                         </t>
                                     </div>
@@ -135,7 +136,7 @@ Injected data:
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Name</t>
                                             <t t-set="input_id" t-value="'firstname'" />
-                                            <t t-set="invalid_hint">Name can not be emtpy</t>
+                                            <t t-set="invalid_hint">Name is required (max 50 characters)</t>
                                             <t t-set="display_content">
                                                 <div class="field-display" data-display-for="firstname">
                                                     <t t-esc="partner.firstname or ''" />
@@ -150,6 +151,7 @@ Injected data:
                                                     t-att-value="partner.firstname"
                                                     t-att-data-original-value="partner.firstname"
                                                     required="required"
+                                                    pattern="[a-zA-Z]{0,50}"
                                                 />
                                         </t>
                                     </div>
@@ -159,10 +161,13 @@ Injected data:
                                         <t t-set="label">Address</t>
                                         <t t-set="input_id" t-value="'street'" />
                                         <t t-set="top_class" t-value="'col-12'" />
-                                        <div class="field-display" data-display-for="street">
-                                            <t t-esc="partner.street or ''" />
-                                        </div>
-                                        <div class="field-edit">
+                                        <t t-set="invalid_hint">Address can not be emtpy</t>
+                                        <t t-set="display_content">
+                                            <div class="field-display" data-display-for="street">
+                                                <t t-esc="partner.street or ''" />
+                                            </div>
+                                        </t>
+                                        <t t-set="edit_field" t-value="True"/>
                                             <input
                                                 type="text"
                                                 id="street"
@@ -170,8 +175,8 @@ Injected data:
                                                 class="form-control"
                                                 t-att-value="partner.street"
                                                 t-att-data-original-value="partner.street"
+                                                required="required"
                                             />
-                                        </div>
                                     </t>
                                 </div>
                                 <div class="row">
@@ -180,10 +185,13 @@ Injected data:
                                             <t t-call="theme_compassion_2025.FormFieldComponent">
                                                 <t t-set="label">Zip</t>
                                                 <t t-set="input_id" t-value="'zip'" />
-                                                <div class="field-display" data-display-for="zip">
-                                                    <t t-esc="partner.zip or ''" />
-                                                </div>
-                                                <div class="field-edit">
+                                                <t t-set="invalid_hint">Enter a 4-digit zip code.</t>
+                                                <t t-set="display_content">
+                                                    <div class="field-display" data-display-for="zip">
+                                                        <t t-esc="partner.zip or ''" />
+                                                    </div>
+                                                </t>
+                                                <t t-set="edit_field" t-value="True"/>
                                                     <input
                                                         type="text"
                                                         id="zip"
@@ -191,8 +199,10 @@ Injected data:
                                                         class="form-control"
                                                         t-att-value="partner.zip"
                                                         t-att-data-original-value="partner.zip"
+                                                        required="required"
+                                                        pattern="[0-9]{4}"
+                                                        inputmode="numeric"
                                                     />
-                                                </div>
                                             </t>
                                         </div>
                                     </t>
@@ -249,10 +259,13 @@ Injected data:
                                         <t t-set="label">Email Address</t>
                                         <t t-set="input_id" t-value="'email'" />
                                         <t t-set="top_class" t-value="'col-12'" />
-                                        <div class="field-display" data-display-for="email">
-                                            <t t-esc="partner.email or ''" />
-                                        </div>
-                                        <div class="field-edit">
+                                        <t t-set="invalid_hint">Please use a valid email address.</t>
+                                        <t t-set="display_content">
+                                            <div class="field-display" data-display-for="email">
+                                                <t t-esc="partner.email or ''" />
+                                            </div>
+                                        </t>
+                                        <t t-set="edit_field" t-value="True"/>
                                             <input
                                                 type="email"
                                                 id="email"
@@ -260,8 +273,8 @@ Injected data:
                                                 class="form-control"
                                                 t-att-value="partner.email"
                                                 t-att-data-original-value="partner.email"
+                                                required="required"
                                             />
-                                        </div>
                                     </t>
                                 </div>
                                 <div class="row">
@@ -269,10 +282,13 @@ Injected data:
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Phone number</t>
                                             <t t-set="input_id" t-value="'phone'" />
-                                            <div class="field-display" data-display-for="phone">
-                                                <t t-esc="partner.phone or ''" />
-                                            </div>
-                                            <div class="field-edit">
+                                            <t t-set="invalid_hint">Please use a valid phone number.</t>
+                                            <t t-set="display_content">
+                                                <div class="field-display" data-display-for="phone">
+                                                    <t t-esc="partner.phone or ''" />
+                                                </div>
+                                            </t>
+                                            <t t-set="edit_field" t-value="True"/>
                                                 <input
                                                     type="tel"
                                                     id="phone"
@@ -280,18 +296,22 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.phone"
                                                     t-att-data-original-value="partner.phone"
+                                                    pattern="[0-9\+\s\(\)]{7,20}"
+                                                    inputmode="numeric"
                                                 />
-                                            </div>
                                         </t>
                                     </div>
                                     <div class="col-md-6 mb-3">
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Mobile phone number</t>
                                             <t t-set="input_id" t-value="'mobile'" />
-                                            <div class="field-display" data-display-for="mobile">
-                                                <t t-esc="partner.mobile or ''" />
-                                            </div>
-                                            <div class="field-edit">
+                                            <t t-set="invalid_hint">Please use a valid mobile number.</t>
+                                            <t t-set="display_content">
+                                                <div class="field-display" data-display-for="mobile">
+                                                    <t t-esc="partner.mobile or ''" />
+                                                </div>
+                                            </t>
+                                            <t t-set="edit_field" t-value="True"/>
                                                 <input
                                                     type="mobile"
                                                     id="mobile"
@@ -299,8 +319,9 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.mobile"
                                                     t-att-data-original-value="partner.mobile"
+                                                    pattern="[0-9\+\s\(\)]{7,20}"
+                                                    inputmode="numeric"
                                                 />
-                                            </div>
                                         </t>
                                     </div>
                                 </div>

From e739e1fdc5f632f55aed8d895acdabea083fd3fc Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Thu, 22 Jan 2026 17:01:15 +0100
Subject: [PATCH 29/37] [T2902] FEATURE: loading spinner added

# FEATURE: Added loading spinner to settings page
# FEATURE: Show/hide spinner based on backend loading state
# FEATURE: Added some styling for the spinner
---
 .../static/src/css/user_settings.css          | 31 +++++++++++++++++++
 .../static/src/js/my2_user_settings.js        | 24 ++++++++++++--
 .../templates/pages/my2_user_settings.xml     |  6 +++-
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/my_compassion/static/src/css/user_settings.css b/my_compassion/static/src/css/user_settings.css
index 3f3385205..80265d91e 100644
--- a/my_compassion/static/src/css/user_settings.css
+++ b/my_compassion/static/src/css/user_settings.css
@@ -113,3 +113,34 @@
     border-top-right-radius: 25px;
     border-bottom-right-radius: 25px;
 }
+
+/* Spinner styling */
+#user-settings-loader {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.spinner-rotate {
+    display: inline-block;
+    animation: custom-spin 1.5s infinite linear !important;
+}
+
+@keyframes custom-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+/* Mobile version override */
+@media (max-width: 767px) {
+    #user-settings-loader .spinner-rotate {
+        display: inline-block !important;
+        visibility: visible; !important;
+    }
+}
+
+
diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 67172fc89..b76aac6fc 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -18,7 +18,7 @@ document.addEventListener("DOMContentLoaded", () => {
          */
         function initializeUserSettings() {
             // Hides the error messages of the select components
-            document.querySelectorAll(".invalid-hint").forEach((hint) => {
+            document.querySelectorAll(".invalid-feedback").forEach((hint) => {
                 hint.style.display = "none";
             });
 
@@ -369,7 +369,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 form.classList.remove("is-editing");
             });
 
-            saveButton.addEventListener("click", (e) => {
+           saveButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 clearValidation();
 
@@ -400,9 +400,28 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
 
                 if (!isValid) return; // return if any of the input values are not valid
+                 // hide buttons and show loader
+                const buttonsForm = document.getElementById("user-settings-buttons");
+                const loader = document.getElementById("user-settings-loader");
+
+                if (buttonsForm) buttonsForm.classList.add("d-none");
+                if (loader) {
+                    loader.classList.remove("d-none");
+                    loader.classList.add("d-flex");
+                }
+
+                const restoreUI = () => {
+                    if (loader) {
+                        loader.classList.add("d-none");
+                        loader.classList.remove("d-flex");
+                    }
+                    if (buttonsForm) buttonsForm.classList.remove("d-none");
+                };
+
 
                 rpc.query({ route: endpoint, params: payload })
                     .then((response) => {
+                        restoreUI();
                         if (response.success) {
                             fields.forEach((field) => {
                                 const input = form.querySelector(`[name="${field}"]`);
@@ -420,6 +439,7 @@ document.addEventListener("DOMContentLoaded", () => {
                         }
                     })
                     .catch((err) => {
+                        restoreUI();
                         console.error("RPC Error:", err);
                         Dialog.alert(null, "An unexpected error occurred. Please try again later.");
                     });
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 7f1131e26..8895f3226 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -325,7 +325,11 @@ Injected data:
                                         </t>
                                     </div>
                                 </div>
-                                <div class="form-actions d-flex justify-content-center mt-4">
+
+                                <div id="user-settings-buttons" class="form-actions d-flex position-relative justify-content-center mt-4">
+                                    <div id="user-settings-loader">
+                                        <i class="fa fa-spinner fa-3x text-core-blue spinner-rotate"/>
+                                    </div>
                                     <div class="w-md-50 view-mode">
                                         <a id="EditInfoButton">
                                             <div class="d-flex flex-column align-items-stretch">

From cedf2a15d4e700d706e5d5fe89fa0fc3c4440f49 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 23 Jan 2026 07:43:23 +0100
Subject: [PATCH 30/37] [T2902] FEATURE: loading spinner working in both
 desktop and mobile view

# FEATURE: spinner parent styling
# REFACTOR: Added wrapper to spin icon and applied animation to the wrapper instead of the icon itself
---
 my_compassion/static/src/css/user_settings.css      | 6 +++++-
 my_compassion/templates/pages/my2_user_settings.xml | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/my_compassion/static/src/css/user_settings.css b/my_compassion/static/src/css/user_settings.css
index 80265d91e..2bccf2961 100644
--- a/my_compassion/static/src/css/user_settings.css
+++ b/my_compassion/static/src/css/user_settings.css
@@ -117,11 +117,15 @@
 /* Spinner styling */
 #user-settings-loader {
     background: rgba(255, 255, 255, 0.5);
+    position: absolute;
+    width: 100%;
+    top: -20px;
+    height: fit-content;
 }
 
 .spinner-rotate {
-    display: inline-block;
     animation: custom-spin 1.5s infinite linear !important;
+    margin: auto;
 }
 
 @keyframes custom-spin {
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 8895f3226..41007a182 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -327,8 +327,10 @@ Injected data:
                                 </div>
 
                                 <div id="user-settings-buttons" class="form-actions d-flex position-relative justify-content-center mt-4">
-                                    <div id="user-settings-loader">
-                                        <i class="fa fa-spinner fa-3x text-core-blue spinner-rotate"/>
+                                    <div id="user-settings-loader" class="d-none">
+                                        <span class="spinner-rotate">
+                                            <i class="fa fa-spinner fa-5x text-core-blue"></i>
+                                        </span>
                                     </div>
                                     <div class="w-md-50 view-mode">
                                         <a id="EditInfoButton">

From 9c00a0eca14ff5b7eab8097ac11a0ab98f0ebb8e Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 23 Jan 2026 07:49:44 +0100
Subject: [PATCH 31/37] [T2902] STYLE: pre-commit changes

---
 .../static/src/css/user_settings.css          |   2 -
 .../static/src/js/my2_user_settings.js        |  16 +-
 .../templates/pages/my2_user_settings.xml     | 146 +++++++++---------
 3 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/my_compassion/static/src/css/user_settings.css b/my_compassion/static/src/css/user_settings.css
index 2bccf2961..2b29c3163 100644
--- a/my_compassion/static/src/css/user_settings.css
+++ b/my_compassion/static/src/css/user_settings.css
@@ -146,5 +146,3 @@
         visibility: visible; !important;
     }
 }
-
-
diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index b76aac6fc..b94f8efeb 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -339,7 +339,6 @@ document.addEventListener("DOMContentLoaded", () => {
             // Validation listener on all input fields
             form.querySelectorAll(".form-control").forEach((input) => {
                 input.addEventListener("input", function () {
-
                     if (!form.classList.contains("is-editing")) return;
 
                     if (this.checkValidity()) {
@@ -352,8 +351,8 @@ document.addEventListener("DOMContentLoaded", () => {
                     } else {
                         this.classList.remove("is-valid");
                     }
-                })
-            })
+                });
+            });
 
             editButton.addEventListener("click", (e) => {
                 e.preventDefault();
@@ -369,7 +368,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 form.classList.remove("is-editing");
             });
 
-           saveButton.addEventListener("click", (e) => {
+            saveButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 clearValidation();
 
@@ -382,7 +381,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
                     if (!input || input.offsetParent === null) continue; // Skip hidden/missing inputs
 
-                    if (!input.checkValidity()) { // input not valid
+                    if (!input.checkValidity()) {
+                        // input not valid
                         isValid = false;
 
                         input.classList.remove("is-valid");
@@ -392,7 +392,8 @@ document.addEventListener("DOMContentLoaded", () => {
                         if (container) container.classList.add("has-error");
                         const hintEl = container.querySelector(".invalid-feedback");
                         if (hintEl) hintEl.style.display = "block";
-                    } else { // input valid
+                    } else {
+                        // input valid
                         input.classList.remove("is-invalid");
                         input.classList.add("is-valid");
                         payload[field] = input.value;
@@ -400,7 +401,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
 
                 if (!isValid) return; // return if any of the input values are not valid
-                 // hide buttons and show loader
+                // hide buttons and show loader
                 const buttonsForm = document.getElementById("user-settings-buttons");
                 const loader = document.getElementById("user-settings-loader");
 
@@ -418,7 +419,6 @@ document.addEventListener("DOMContentLoaded", () => {
                     if (buttonsForm) buttonsForm.classList.remove("d-none");
                 };
 
-
                 rpc.query({ route: endpoint, params: payload })
                     .then((response) => {
                         restoreUI();
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 41007a182..448840872 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -71,7 +71,11 @@ Injected data:
                     <div class="single-column tab-content pt-4" id="UserSettingsTabContent">
                         <!-- Personal info tab -->
                         <div class="tab-pane fade" id="personal-information" role="tabpanel">
-                            <form id="personal-information-form" class="bg-pure-white col-md-12 col-sm-12" novalidate="novalidate">
+                            <form
+                                id="personal-information-form"
+                                class="bg-pure-white col-md-12 col-sm-12"
+                                novalidate="novalidate"
+                            >
                                 <div class="row col-12 mb-3">
                                     <t t-call="theme_compassion_2025.FormFieldComponent">
                                         <t t-set="label">My reference</t>
@@ -120,7 +124,7 @@ Injected data:
                                                     <t t-esc="partner.lastname or ''" />
                                                 </div>
                                             </t>
-                                            <t t-set="edit_field" t-value="True"/>
+                                            <t t-set="edit_field" t-value="True" />
                                             <input
                                                 type="text"
                                                 id="lastname"
@@ -142,17 +146,17 @@ Injected data:
                                                     <t t-esc="partner.firstname or ''" />
                                                 </div>
                                             </t>
-                                            <t t-set="edit_field" t-value="True"/>
-                                                <input
-                                                    type="text"
-                                                    id="firstname"
-                                                    name="firstname"
-                                                    class="form-control"
-                                                    t-att-value="partner.firstname"
-                                                    t-att-data-original-value="partner.firstname"
-                                                    required="required"
-                                                    pattern="[a-zA-Z]{0,50}"
-                                                />
+                                            <t t-set="edit_field" t-value="True" />
+                                            <input
+                                                type="text"
+                                                id="firstname"
+                                                name="firstname"
+                                                class="form-control"
+                                                t-att-value="partner.firstname"
+                                                t-att-data-original-value="partner.firstname"
+                                                required="required"
+                                                pattern="[a-zA-Z]{0,50}"
+                                            />
                                         </t>
                                     </div>
                                 </div>
@@ -167,16 +171,16 @@ Injected data:
                                                 <t t-esc="partner.street or ''" />
                                             </div>
                                         </t>
-                                        <t t-set="edit_field" t-value="True"/>
-                                            <input
-                                                type="text"
-                                                id="street"
-                                                name="street"
-                                                class="form-control"
-                                                t-att-value="partner.street"
-                                                t-att-data-original-value="partner.street"
-                                                required="required"
-                                            />
+                                        <t t-set="edit_field" t-value="True" />
+                                        <input
+                                            type="text"
+                                            id="street"
+                                            name="street"
+                                            class="form-control"
+                                            t-att-value="partner.street"
+                                            t-att-data-original-value="partner.street"
+                                            required="required"
+                                        />
                                     </t>
                                 </div>
                                 <div class="row">
@@ -191,18 +195,18 @@ Injected data:
                                                         <t t-esc="partner.zip or ''" />
                                                     </div>
                                                 </t>
-                                                <t t-set="edit_field" t-value="True"/>
-                                                    <input
-                                                        type="text"
-                                                        id="zip"
-                                                        name="zip"
-                                                        class="form-control"
-                                                        t-att-value="partner.zip"
-                                                        t-att-data-original-value="partner.zip"
-                                                        required="required"
-                                                        pattern="[0-9]{4}"
-                                                        inputmode="numeric"
-                                                    />
+                                                <t t-set="edit_field" t-value="True" />
+                                                <input
+                                                    type="text"
+                                                    id="zip"
+                                                    name="zip"
+                                                    class="form-control"
+                                                    t-att-value="partner.zip"
+                                                    t-att-data-original-value="partner.zip"
+                                                    required="required"
+                                                    pattern="[0-9]{4}"
+                                                    inputmode="numeric"
+                                                />
                                             </t>
                                         </div>
                                     </t>
@@ -265,16 +269,16 @@ Injected data:
                                                 <t t-esc="partner.email or ''" />
                                             </div>
                                         </t>
-                                        <t t-set="edit_field" t-value="True"/>
-                                            <input
-                                                type="email"
-                                                id="email"
-                                                name="email"
-                                                class="form-control"
-                                                t-att-value="partner.email"
-                                                t-att-data-original-value="partner.email"
-                                                required="required"
-                                            />
+                                        <t t-set="edit_field" t-value="True" />
+                                        <input
+                                            type="email"
+                                            id="email"
+                                            name="email"
+                                            class="form-control"
+                                            t-att-value="partner.email"
+                                            t-att-data-original-value="partner.email"
+                                            required="required"
+                                        />
                                     </t>
                                 </div>
                                 <div class="row">
@@ -288,17 +292,17 @@ Injected data:
                                                     <t t-esc="partner.phone or ''" />
                                                 </div>
                                             </t>
-                                            <t t-set="edit_field" t-value="True"/>
-                                                <input
-                                                    type="tel"
-                                                    id="phone"
-                                                    name="phone"
-                                                    class="form-control"
-                                                    t-att-value="partner.phone"
-                                                    t-att-data-original-value="partner.phone"
-                                                    pattern="[0-9\+\s\(\)]{7,20}"
-                                                    inputmode="numeric"
-                                                />
+                                            <t t-set="edit_field" t-value="True" />
+                                            <input
+                                                type="tel"
+                                                id="phone"
+                                                name="phone"
+                                                class="form-control"
+                                                t-att-value="partner.phone"
+                                                t-att-data-original-value="partner.phone"
+                                                pattern="[0-9\+\s\(\)]{7,20}"
+                                                inputmode="numeric"
+                                            />
                                         </t>
                                     </div>
                                     <div class="col-md-6 mb-3">
@@ -311,25 +315,27 @@ Injected data:
                                                     <t t-esc="partner.mobile or ''" />
                                                 </div>
                                             </t>
-                                            <t t-set="edit_field" t-value="True"/>
-                                                <input
-                                                    type="mobile"
-                                                    id="mobile"
-                                                    name="mobile"
-                                                    class="form-control"
-                                                    t-att-value="partner.mobile"
-                                                    t-att-data-original-value="partner.mobile"
-                                                    pattern="[0-9\+\s\(\)]{7,20}"
-                                                    inputmode="numeric"
-                                                />
+                                            <t t-set="edit_field" t-value="True" />
+                                            <input
+                                                type="mobile"
+                                                id="mobile"
+                                                name="mobile"
+                                                class="form-control"
+                                                t-att-value="partner.mobile"
+                                                t-att-data-original-value="partner.mobile"
+                                                pattern="[0-9\+\s\(\)]{7,20}"
+                                                inputmode="numeric"
+                                            />
                                         </t>
                                     </div>
                                 </div>
-
-                                <div id="user-settings-buttons" class="form-actions d-flex position-relative justify-content-center mt-4">
+                                <div
+                                    id="user-settings-buttons"
+                                    class="form-actions d-flex position-relative justify-content-center mt-4"
+                                >
                                     <div id="user-settings-loader" class="d-none">
                                         <span class="spinner-rotate">
-                                            <i class="fa fa-spinner fa-5x text-core-blue"></i>
+                                            <i class="fa fa-spinner fa-5x text-core-blue" />
                                         </span>
                                     </div>
                                     <div class="w-md-50 view-mode">

From f6c9b22859f7bcffc1be53061c9351208e0aa8f2 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 23 Jan 2026 07:56:40 +0100
Subject: [PATCH 32/37] [T2092] STYLE: pre-commit 2

---
 theme_compassion_2025/templates/components/FormField.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/theme_compassion_2025/templates/components/FormField.xml b/theme_compassion_2025/templates/components/FormField.xml
index fc91f6bc9..f9ae7a466 100644
--- a/theme_compassion_2025/templates/components/FormField.xml
+++ b/theme_compassion_2025/templates/components/FormField.xml
@@ -21,14 +21,14 @@
                 </label>
             </t>
             <t t-if="display_content">
-                <t t-raw="display_content"/>
+                <t t-raw="display_content" />
             </t>
             <t t-if="edit_field">
                 <div class="field-edit">
                     <t t-raw="0" />
                     <div class="invalid-feedback text-mid-orange tiny-text mb-1">
                         <t t-esc="final_invalid_hint" />
-                     </div>
+                    </div>
                 </div>
             </t>
             <t t-else="">

From c97fd3dc5875ab45b87ead005efa6dc14154c392 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 23 Jan 2026 09:39:54 +0100
Subject: [PATCH 33/37] [T2902] FIX: Gemini code assist suggestions

# FIX: removed redundant mobile version override selector
# FIX: fixed typos and made minor corrections to regex patterns
# REFACTOR: Simplified javascript
---
 .../static/src/css/user_settings.css          |   9 +-
 .../static/src/js/my2_user_settings.js        | 155 +++++++-----------
 .../templates/pages/my2_user_settings.xml     |  15 +-
 3 files changed, 72 insertions(+), 107 deletions(-)

diff --git a/my_compassion/static/src/css/user_settings.css b/my_compassion/static/src/css/user_settings.css
index 2b29c3163..ae128ef01 100644
--- a/my_compassion/static/src/css/user_settings.css
+++ b/my_compassion/static/src/css/user_settings.css
@@ -121,6 +121,7 @@
     width: 100%;
     top: -20px;
     height: fit-content;
+    display: flex;
 }
 
 .spinner-rotate {
@@ -138,11 +139,3 @@
         transform: rotate(359deg);
     }
 }
-
-/* Mobile version override */
-@media (max-width: 767px) {
-    #user-settings-loader .spinner-rotate {
-        display: inline-block !important;
-        visibility: visible; !important;
-    }
-}
diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index b94f8efeb..6e7858354 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -17,11 +17,6 @@ document.addEventListener("DOMContentLoaded", () => {
          * Main setup function to initialize all event listeners.
          */
         function initializeUserSettings() {
-            // Hides the error messages of the select components
-            document.querySelectorAll(".invalid-feedback").forEach((hint) => {
-                hint.style.display = "none";
-            });
-
             initTabNavigation();
             initCommunicationSettings();
             initAgreementsForm();
@@ -149,28 +144,6 @@ document.addEventListener("DOMContentLoaded", () => {
             });
         }
 
-        /**
-         * Attaches a standardized event listener to an agreement checkbox.
-         * When checked, it calls a specific RPC route.
-         */
-
-        function attachAgreementListener(checkbox, route) {
-            checkbox.addEventListener("change", function () {
-                // Only proceed if the checkbox is being checked
-                if (!this.checked) return;
-
-                rpc.query({ route, params: {} })
-                    .then(() => {
-                        window.location.reload();
-                    })
-                    .catch((err) => {
-                        console.error("RPC Error:", err);
-                        this.checked = false; // Revert the checkbox state on error
-                        Dialog.alert(null, "Could not save your confirmation. Please try again.");
-                    });
-            });
-        }
-
         /**
          * Initializes the privacy checkbox.
          */
@@ -289,18 +262,49 @@ document.addEventListener("DOMContentLoaded", () => {
 
             let originalValues = {};
 
-            const clearValidation = () => {
-                form.querySelectorAll(".is-invalid, .is-valid").forEach((input) => {
-                    input.classList.remove("is-invalid");
-                    input.classList.remove("is-valid");
-                    const container = input.closest(".form-field-container");
-                    if (container) container.classList.remove("has-error");
+            // --- HELPER FUNCTION ---
+
+            const storeOriginalValues = () => {
+                fields.forEach((field) => {
+                    const input = form.querySelector(`[name="${field}"]`);
+                    if (input) originalValues[field] = input.value;
                 });
-                form.querySelectorAll(".invalid-feedback").forEach((hint) => {
-                    hint.style.display = "none";
+            };
+
+            const restoreOriginalValues = () => {
+                fields.forEach((field) => {
+                    const input = form.querySelector(`[name="${field}"]`);
+                    if (input && originalValues[field] !== undefined) {
+                        input.value = originalValues[field];
+                    }
                 });
             };
 
+            const resetErrorUI = () => {
+                form.querySelectorAll(".is-invalid, .is-valid").forEach((el) =>
+                    el.classList.remove("is-invalid", "is-valid")
+                );
+                form.querySelectorAll(".invalid-feedback").forEach((el) => (el.style.display = "none"));
+                form.querySelectorAll(".form-field-container.has-error").forEach((el) =>
+                    el.classList.remove("has-error")
+                );
+            };
+
+            function toggleEdit(isEditing) {
+                resetErrorUI();
+                form.classList.toggle("is-editing", isEditing);
+            }
+
+            function toggleLoader(isLoading) {
+                const loader = document.getElementById("user-settings-loader");
+
+                if (isLoading) {
+                    loader?.classList.remove("d-none");
+                } else {
+                    loader?.classList.add("d-none");
+                }
+            }
+
             const showErrors = (errors) => {
                 for (const fieldName in errors) {
                     const input = form.querySelector(`[name="${fieldName}"]`);
@@ -320,34 +324,23 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
             };
 
-            const storeOriginalValues = () => {
-                fields.forEach((field) => {
-                    const input = form.querySelector(`[name="${field}"]`);
-                    if (input) originalValues[field] = input.value;
-                });
-            };
-
-            const restoreOriginalValues = () => {
-                fields.forEach((field) => {
-                    const input = form.querySelector(`[name="${field}"]`);
-                    if (input && originalValues[field] !== undefined) {
-                        input.value = originalValues[field];
-                    }
-                });
-            };
+            // --- EVENT LISTENERS ---
 
             // Validation listener on all input fields
             form.querySelectorAll(".form-control").forEach((input) => {
                 input.addEventListener("input", function () {
                     if (!form.classList.contains("is-editing")) return;
 
-                    if (this.checkValidity()) {
+                    if (this.checkValidity() && this.value !== "") {
                         this.classList.remove("is-invalid");
+
                         const container = this.closest(".form-field-container");
-                        if (container) container.classList.remove("has-error");
-                        this.classList.add("is-valid");
-                        const hintEl = container.querySelector(".invalid-feedback");
-                        if (hintEl) hintEl.style.display = "none";
+                        if (container) {
+                            container.classList.remove("has-error");
+                            this.classList.add("is-valid");
+                            const hintEl = container.querySelector(".invalid-feedback");
+                            if (hintEl) hintEl.style.display = "none";
+                        }
                     } else {
                         this.classList.remove("is-valid");
                     }
@@ -357,71 +350,49 @@ document.addEventListener("DOMContentLoaded", () => {
             editButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 storeOriginalValues();
-                clearValidation();
-                form.classList.add("is-editing");
+                toggleEdit(true);
             });
 
             cancelButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 restoreOriginalValues();
-                clearValidation();
-                form.classList.remove("is-editing");
+                toggleEdit(false);
             });
 
             saveButton.addEventListener("click", (e) => {
                 e.preventDefault();
-                clearValidation();
+                resetErrorUI();
 
                 let isValid = true;
                 const payload = {};
 
-                for (let i = 0; i < fields.length; i++) {
-                    const field = fields[i];
+                for (const field of fields) {
                     const input = form.querySelector(`[name="${field}"]`);
-
                     if (!input || input.offsetParent === null) continue; // Skip hidden/missing inputs
 
                     if (!input.checkValidity()) {
-                        // input not valid
                         isValid = false;
-
-                        input.classList.remove("is-valid");
                         input.classList.add("is-invalid");
+                        input.classList.remove("is-valid");
 
                         const container = input.closest(".form-field-container");
-                        if (container) container.classList.add("has-error");
-                        const hintEl = container.querySelector(".invalid-feedback");
-                        if (hintEl) hintEl.style.display = "block";
+                        if (container) {
+                            container.classList.add("has-error");
+                            const errorMsg = container.querySelector(".invalid-feedback");
+                            if (errorMsg) errorMsg.style.display = "block";
+                        }
                     } else {
-                        // input valid
-                        input.classList.remove("is-invalid");
-                        input.classList.add("is-valid");
                         payload[field] = input.value;
                     }
                 }
 
                 if (!isValid) return; // return if any of the input values are not valid
-                // hide buttons and show loader
-                const buttonsForm = document.getElementById("user-settings-buttons");
-                const loader = document.getElementById("user-settings-loader");
-
-                if (buttonsForm) buttonsForm.classList.add("d-none");
-                if (loader) {
-                    loader.classList.remove("d-none");
-                    loader.classList.add("d-flex");
-                }
-
-                const restoreUI = () => {
-                    if (loader) {
-                        loader.classList.add("d-none");
-                        loader.classList.remove("d-flex");
-                    }
-                    if (buttonsForm) buttonsForm.classList.remove("d-none");
-                };
+                toggleLoader(true);
 
                 rpc.query({ route: endpoint, params: payload })
                     .then((response) => {
-                        restoreUI();
+                        toggleLoader(false);
+
                         if (response.success) {
                             fields.forEach((field) => {
                                 const input = form.querySelector(`[name="${field}"]`);
@@ -431,7 +402,7 @@ document.addEventListener("DOMContentLoaded", () => {
                                 displayEl.textContent =
                                     input.tagName === "SELECT" ? input.options[input.selectedIndex].text : input.value;
                             });
-                            form.classList.remove("is-editing");
+                            toggleEdit(false);
                         } else {
                             if (response.errors) {
                                 showErrors(response.errors);
@@ -439,7 +410,7 @@ document.addEventListener("DOMContentLoaded", () => {
                         }
                     })
                     .catch((err) => {
-                        restoreUI();
+                        toggleLoader(false);
                         console.error("RPC Error:", err);
                         Dialog.alert(null, "An unexpected error occurred. Please try again later.");
                     });
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 448840872..6685e62ae 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -118,7 +118,9 @@ Injected data:
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Surname</t>
                                             <t t-set="input_id" t-value="'lastname'" />
-                                            <t t-set="invalid_hint">Surname is required (max 50 characters)</t>
+                                            <t t-set="invalid_hint">
+                                                Surname is required (max 50 characters, no numbers)
+                                            </t>
                                             <t t-set="display_content">
                                                 <div class="field-display" data-display-for="lastname">
                                                     <t t-esc="partner.lastname or ''" />
@@ -132,7 +134,7 @@ Injected data:
                                                 class="form-control"
                                                 t-att-value="partner.lastname"
                                                 required="required"
-                                                pattern="[a-zA-Z]{0,50}"
+                                                pattern="[^0-9]{0,50}"
                                             />
                                         </t>
                                     </div>
@@ -140,7 +142,7 @@ Injected data:
                                         <t t-call="theme_compassion_2025.FormFieldComponent">
                                             <t t-set="label">Name</t>
                                             <t t-set="input_id" t-value="'firstname'" />
-                                            <t t-set="invalid_hint">Name is required (max 50 characters)</t>
+                                            <t t-set="invalid_hint">Name is required (max 50 characters, no numbers)</t>
                                             <t t-set="display_content">
                                                 <div class="field-display" data-display-for="firstname">
                                                     <t t-esc="partner.firstname or ''" />
@@ -153,9 +155,8 @@ Injected data:
                                                 name="firstname"
                                                 class="form-control"
                                                 t-att-value="partner.firstname"
-                                                t-att-data-original-value="partner.firstname"
                                                 required="required"
-                                                pattern="[a-zA-Z]{0,50}"
+                                                pattern="[^0-9]{0,50}"
                                             />
                                         </t>
                                     </div>
@@ -165,7 +166,7 @@ Injected data:
                                         <t t-set="label">Address</t>
                                         <t t-set="input_id" t-value="'street'" />
                                         <t t-set="top_class" t-value="'col-12'" />
-                                        <t t-set="invalid_hint">Address can not be emtpy</t>
+                                        <t t-set="invalid_hint">Address can not be empty</t>
                                         <t t-set="display_content">
                                             <div class="field-display" data-display-for="street">
                                                 <t t-esc="partner.street or ''" />
@@ -317,7 +318,7 @@ Injected data:
                                             </t>
                                             <t t-set="edit_field" t-value="True" />
                                             <input
-                                                type="mobile"
+                                                type="tel"
                                                 id="mobile"
                                                 name="mobile"
                                                 class="form-control"

From 26a6763430d50dde4f495d4b994053ace19e1f4c Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Tue, 10 Feb 2026 17:14:20 +0100
Subject: [PATCH 34/37] [T2902] REFACTOR: final form validation settings

- REFACTOR: removed unused toggleLoader function calls
- REFACTOR: removed user reference and phone required from user settings
- REFACTOR: added classes to hide the red asterisk in display mode
- REFACTOR: changed var to const, and changed error message to display in white when dark-bg class is added to input
---
 .../static/src/js/my2_user_settings.js          |  4 ----
 .../templates/pages/my2_user_settings.xml       | 10 ----------
 .../static/src/scss/components/_form_field.scss |  8 ++++++++
 .../static/src/utils/form_field_validator.js    | 17 +++++++++++------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 346e7339b..517eb6b94 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -386,12 +386,9 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
 
                 if (!isValid) return; // return if any of the input values are not valid
-                toggleLoader(true);
 
                 rpc.query({ route: endpoint, params: payload })
                     .then((response) => {
-                        toggleLoader(false);
-
                         if (response.success) {
                             fields.forEach((field) => {
                                 const input = form.querySelector(`[name="${field}"]`);
@@ -409,7 +406,6 @@ document.addEventListener("DOMContentLoaded", () => {
                         }
                     })
                     .catch((err) => {
-                        toggleLoader(false);
                         console.error("RPC Error:", err);
                         Dialog.alert(null, "An unexpected error occurred. Please try again later.");
                     });
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index fe3481ea6..90101f594 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -76,14 +76,6 @@ Injected data:
                                 class="bg-pure-white col-md-12 col-sm-12"
                                 novalidate="novalidate"
                             >
-                                <div class="row col-12 mb-3">
-                                    <t t-call="theme_compassion_2025.FormFieldComponent">
-                                        <t t-set="label">My reference</t>
-                                        <div>
-                                            <t t-esc="partner.ref if partner.ref else ''" />
-                                        </div>
-                                    </t>
-                                </div>
                                 <div class="row col-12 mb-3">
                                     <t t-call="theme_compassion_2025.FormFieldComponent">
                                         <t t-set="label">Title</t>
@@ -288,7 +280,6 @@ Injected data:
                                                     t-att-value="partner.phone"
                                                     t-att-data-original-value="partner.phone"
                                                     data-validate-type="phone"
-                                                    required=""
                                                 />
                                             </div>
                                         </t>
@@ -309,7 +300,6 @@ Injected data:
                                                     t-att-value="partner.mobile"
                                                     t-att-data-original-value="partner.mobile"
                                                     data-validate-type="phone"
-                                                    required=""
                                                 />
                                             </div>
                                         </t>
diff --git a/theme_compassion_2025/static/src/scss/components/_form_field.scss b/theme_compassion_2025/static/src/scss/components/_form_field.scss
index a2be128e4..93b7f2490 100644
--- a/theme_compassion_2025/static/src/scss/components/_form_field.scss
+++ b/theme_compassion_2025/static/src/scss/components/_form_field.scss
@@ -7,3 +7,11 @@
         display: block;
     }
 }
+
+.form-field-component .required-asterisk {
+    display: none;
+}
+
+.is-editing .form-field-component .required-asterisk {
+    display: inline;
+}
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index d3e63d522..4ca29c4f7 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -18,11 +18,11 @@
 odoo.define("my_compassion.form_field_validator", function (require) {
     "use strict";
 
-    var publicWidget = require("web.public.widget");
+    const publicWidget = require("web.public.widget");
 
-    var validationConfig = {
+    const validationConfig = {
         required: {
-            suffix: '<span class="text-mid-orange">*</span>',
+            suffix: '<span class="text-mid-orange required-asterisk">*</span>',
             defaultErrorMessage: "This field is required.",
         },
         email: {
@@ -87,7 +87,7 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          */
         validate: function () {
             this.clearError();
-            var value = this.$input.val();
+            const value = this.$input.val();
 
             if (this.isRequired && !value) {
                 this.showError(this.errorMessages.required);
@@ -115,9 +115,14 @@ odoo.define("my_compassion.form_field_validator", function (require) {
          */
         showError: function (message) {
             this.$input.addClass("is-invalid");
-            var $errorHint = $('<div class="input-invalid-hint text-mid-orange tiny-text mt-2">').text(message);
 
-            var $selectContainer = this.$input.closest(".SelectComponent");
+            const isDark = this.$input.hasClass("dark-bg");
+            const colorClass = isDark ? "text-pure-white" : "text-mid-orange";
+            const classes = `input-invalid-hint ${colorClass} tiny-text mt-2`;
+
+            const $errorHint = $(`<div class="${classes}">`).text(message);
+
+            const $selectContainer = this.$input.closest(".SelectComponent");
             if ($selectContainer.length > 0) {
                 $selectContainer.after($errorHint);
             } else {

From 6f884471ece82ececaf37e1269c9bbbd378c98ae Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Wed, 11 Feb 2026 11:41:26 +0100
Subject: [PATCH 35/37] [T2902] REFACTOR: unification and ux improvements

- REFACTOR: changed position of loading indicator
- REFACTOR: consolidated and simplify js business logic on user form settings
- REFACTOR: added container to edit + cancel button for better positioning
- REFACTOR: added a limit of 15 numbers to phone number fields
- FEAT: added name and zip regex
---
 .../static/src/css/user_settings.css          |   2 +-
 .../static/src/js/my2_user_settings.js        | 133 +++++++++---------
 .../templates/pages/my2_user_settings.xml     |  57 ++++----
 .../static/src/utils/form_field_validator.js  |  15 +-
 4 files changed, 111 insertions(+), 96 deletions(-)

diff --git a/my_compassion/static/src/css/user_settings.css b/my_compassion/static/src/css/user_settings.css
index ae128ef01..a5246f83b 100644
--- a/my_compassion/static/src/css/user_settings.css
+++ b/my_compassion/static/src/css/user_settings.css
@@ -119,7 +119,7 @@
     background: rgba(255, 255, 255, 0.5);
     position: absolute;
     width: 100%;
-    top: -20px;
+    top: 0;
     height: fit-content;
     display: flex;
 }
diff --git a/my_compassion/static/src/js/my2_user_settings.js b/my_compassion/static/src/js/my2_user_settings.js
index 517eb6b94..bbab041fe 100644
--- a/my_compassion/static/src/js/my2_user_settings.js
+++ b/my_compassion/static/src/js/my2_user_settings.js
@@ -262,52 +262,62 @@ document.addEventListener("DOMContentLoaded", () => {
 
             let originalValues = {};
 
-            const showBackendErrors = (errors) => {
-                for (const fieldName in errors) {
-                    const input = form.querySelector(`[name="${fieldName}"]`);
-                    if (!input) continue;
+            const getFieldWidget = (fieldName) => {
+                const input = form.querySelector(`[name="${fieldName}"]`);
+                if (!input) return null;
 
-                    const fieldComponent = input.closest(".form-field-component");
-                    if (!fieldComponent) continue;
+                return $(input).closest(".form-field-component").data("widget");
+            };
 
-                    const fieldWidget = $(fieldComponent).data("widget");
-                    if (!fieldWidget) continue;
+            function toggleLoader(isLoading) {
+                const loader = document.getElementById("user-settings-loader");
 
-                    fieldWidget.showError(errors[fieldName]);
+                if (isLoading) {
+                    loader?.classList.remove("d-none");
+                } else {
+                    loader?.classList.add("d-none");
+                }
+            }
+
+            const showBackendErrors = (errors) => {
+                for (const fieldName in errors) {
+                    const widget = getFieldWidget(fieldName);
+                    if (widget) {
+                        widget.showError(errors[fieldName]);
+                    } else {
+                        console.warn(`No widget found for field ${fieldName} to display error: ${errors[fieldName]}`);
+                    }
                 }
             };
 
             const clearErrors = () => {
-                let isValid = true;
-
-                $(form)
-                    .find(".form-field-component:visible")
-                    .each(function () {
-                        const fieldWidget = $(this).data("widget");
-                        fieldWidget.clearError();
-                    });
-
-                return isValid;
+                fields.forEach((field) => {
+                    const widget = getFieldWidget(field);
+                    if (widget) {
+                        widget.clearError();
+                    }
+                });
             };
+
             const validateForm = () => {
                 let isValid = true;
 
-                $(form)
-                    .find(".form-field-component:visible")
-                    .each(function () {
-                        const fieldWidget = $(this).data("widget");
-
-                        if (!fieldWidget.validate()) {
+                fields.forEach((field) => {
+                    const widget = getFieldWidget(field);
+                    if (widget) {
+                        if (!widget.validate()) {
                             isValid = false;
                         }
-                    });
+                    }
+                });
 
                 return isValid;
             };
+
             const storeOriginalValues = () => {
                 fields.forEach((field) => {
                     const input = form.querySelector(`[name="${field}"]`);
-                    if (input) originalValues[field] = input.value;
+                    if (input) originalValues[field] = input.type === "checkbox" ? input.checked : input.value;
                 });
             };
 
@@ -315,37 +325,30 @@ document.addEventListener("DOMContentLoaded", () => {
                 fields.forEach((field) => {
                     const input = form.querySelector(`[name="${field}"]`);
                     if (input && originalValues[field] !== undefined) {
-                        input.value = originalValues[field];
+                        if (input.type === "checkbox") {
+                            input.checked = originalValues[field];
+                        } else {
+                            input.value = originalValues[field];
+                        }
                     }
                 });
             };
 
-            const resetErrorUI = () => {
-                form.querySelectorAll(".is-invalid, .is-valid").forEach((el) =>
-                    el.classList.remove("is-invalid", "is-valid")
-                );
-                form.querySelectorAll(".invalid-feedback").forEach((el) => (el.style.display = "none"));
-                form.querySelectorAll(".form-field-container.has-error").forEach((el) =>
-                    el.classList.remove("has-error")
-                );
+            const anyValueUpdated = () => {
+                return fields.some((field) => {
+                    const input = form.querySelector(`[name="${field}"]`);
+                    if (input) {
+                        const valueToCheck = input.type === "checkbox" ? input.checked : input.value;
+                        return valueToCheck !== originalValues[field];
+                    }
+                });
             };
 
             function toggleEdit(isEditing) {
-                resetErrorUI();
+                clearErrors();
                 form.classList.toggle("is-editing", isEditing);
             }
 
-            saveButton.addEventListener("click", () => {
-                if (!validateForm()) {
-                    return;
-                }
-                const payload = {};
-                fields.forEach((field) => {
-                    const input = form.querySelector(`[name="${field}"]`);
-                    if (input) payload[field] = input.value;
-                });
-            });
-
             editButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 storeOriginalValues();
@@ -360,33 +363,24 @@ document.addEventListener("DOMContentLoaded", () => {
 
             saveButton.addEventListener("click", (e) => {
                 e.preventDefault();
-                resetErrorUI();
+                clearErrors();
 
-                let isValid = true;
-                const payload = {};
+                if (!validateForm()) return;
+                toggleLoader(true);
+
+                if (!anyValueUpdated()) {
+                    toggleLoader(false);
+                    toggleEdit(false);
+                    return;
+                }
 
+                const payload = {};
                 for (const field of fields) {
                     const input = form.querySelector(`[name="${field}"]`);
                     if (!input || input.offsetParent === null) continue; // Skip hidden/missing inputs
-
-                    if (!input.checkValidity()) {
-                        isValid = false;
-                        input.classList.add("is-invalid");
-                        input.classList.remove("is-valid");
-
-                        const container = input.closest(".form-field-container");
-                        if (container) {
-                            container.classList.add("has-error");
-                            const errorMsg = container.querySelector(".invalid-feedback");
-                            if (errorMsg) errorMsg.style.display = "block";
-                        }
-                    } else {
-                        payload[field] = input.value;
-                    }
+                    payload[field] = input.type === "checkbox" ? input.checked : input.value;
                 }
 
-                if (!isValid) return; // return if any of the input values are not valid
-
                 rpc.query({ route: endpoint, params: payload })
                     .then((response) => {
                         if (response.success) {
@@ -399,15 +393,18 @@ document.addEventListener("DOMContentLoaded", () => {
                                     input.tagName === "SELECT" ? input.options[input.selectedIndex].text : input.value;
                             });
                             toggleEdit(false);
+                            toggleLoader(false);
                         } else {
                             if (response.errors) {
                                 showBackendErrors(response.errors);
                             }
+                            toggleLoader(false);
                         }
                     })
                     .catch((err) => {
                         console.error("RPC Error:", err);
                         Dialog.alert(null, "An unexpected error occurred. Please try again later.");
+                        toggleLoader(false);
                     });
             });
         }
diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 90101f594..08b8966f9 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -73,7 +73,7 @@ Injected data:
                         <div class="tab-pane fade" id="personal-information" role="tabpanel">
                             <form
                                 id="personal-information-form"
-                                class="bg-pure-white col-md-12 col-sm-12"
+                                class="bg-pure-white col-md-12 col-sm-12 position-relative"
                                 novalidate="novalidate"
                             >
                                 <div class="row col-12 mb-3">
@@ -81,7 +81,7 @@ Injected data:
                                         <t t-set="label">Title</t>
                                         <t t-set="input_id" t-value="'title'" />
                                         <div class="field-display" data-display-for="title">
-                                            <t t-esc="partner.title.name or ''" />
+                                            <t t-esc="partner.title.shortcut or ''" />
                                         </div>
                                         <div class="field-edit">
                                             <div class="pl-0 pr-5 m-0">
@@ -98,7 +98,7 @@ Injected data:
                                                             t-att-value="t.id"
                                                             t-att-selected="partner.title.id == t.id"
                                                         >
-                                                            <t t-esc="t.name" />
+                                                            <t t-esc="t.shortcut" />
                                                         </option>
                                                     </t>
                                                 </t>
@@ -122,6 +122,7 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.lastname"
                                                     t-att-data-original-value="partner.lastname"
+                                                    data-validate-type="name"
                                                     required=""
                                                 />
                                             </div>
@@ -142,6 +143,7 @@ Injected data:
                                                     class="form-control"
                                                     t-att-value="partner.firstname"
                                                     t-att-data-original-value="partner.firstname"
+                                                    data-validate-type="name"
                                                     required=""
                                                 />
                                             </div>
@@ -186,6 +188,7 @@ Injected data:
                                                         class="form-control"
                                                         t-att-value="partner.zip"
                                                         t-att-data-original-value="partner.zip"
+                                                        data-validate-type="zip"
                                                         required=""
                                                     />
                                                 </div>
@@ -309,11 +312,6 @@ Injected data:
                                     id="user-settings-buttons"
                                     class="form-actions d-flex position-relative justify-content-center mt-4"
                                 >
-                                    <div id="user-settings-loader" class="d-none">
-                                        <span class="spinner-rotate">
-                                            <i class="fa fa-spinner fa-5x text-core-blue" />
-                                        </span>
-                                    </div>
                                     <div class="w-md-50 view-mode">
                                         <a id="EditInfoButton">
                                             <div class="d-flex flex-column align-items-stretch">
@@ -328,26 +326,33 @@ Injected data:
                                         </a>
                                     </div>
                                     <div class="edit-mode">
-                                        <a id="ApplyModificationsInfoButton" class="d-inline-block me-2">
-                                            <t t-call="theme_compassion_2025.ThemedButtonComponent">
-                                                <t t-set="variant" t-value="'default'" />
-                                                <t t-set="variation" t-value="'filled'" />
-                                                <t t-set="label">Save settings</t>
-                                                <t t-set="color" t-value="'mid-green'" />
-                                                <t t-set="text_color" t-value="'pure-white'" />
-                                            </t>
-                                        </a>
-                                        <a id="CancelModificationsInfoButton" class="d-inline-block">
-                                            <t t-call="theme_compassion_2025.ThemedButtonComponent">
-                                                <t t-set="variant" t-value="'default'" />
-                                                <t t-set="variation" t-value="'filled'" />
-                                                <t t-set="label">Cancel</t>
-                                                <t t-set="color" t-value="'low-orange'" />
-                                                <t t-set="text_color" t-value="'pure-white'" />
-                                            </t>
-                                        </a>
+                                        <div class="d-flex w-100 justify-content-around flex-wrap">
+                                            <a id="ApplyModificationsInfoButton" class="d-inline-block m-2 ">
+                                                <t t-call="theme_compassion_2025.ThemedButtonComponent">
+                                                    <t t-set="variant" t-value="'default'" />
+                                                    <t t-set="variation" t-value="'filled'" />
+                                                    <t t-set="label">Save settings</t>
+                                                    <t t-set="color" t-value="'mid-green'" />
+                                                    <t t-set="text_color" t-value="'pure-white'" />
+                                                </t>
+                                            </a>
+                                            <a id="CancelModificationsInfoButton" class="d-inline-block m-2">
+                                                <t t-call="theme_compassion_2025.ThemedButtonComponent">
+                                                    <t t-set="variant" t-value="'default'" />
+                                                    <t t-set="variation" t-value="'filled'" />
+                                                    <t t-set="label">Cancel</t>
+                                                    <t t-set="color" t-value="'low-orange'" />
+                                                    <t t-set="text_color" t-value="'pure-white'" />
+                                                </t>
+                                            </a>
+                                        </div>
                                     </div>
                                 </div>
+                                <div id="user-settings-loader" class="d-none h-100">
+                                    <span class="spinner-rotate">
+                                        <i class="fa fa-spinner fa-5x text-core-blue" />
+                                    </span>
+                                </div>
                             </form>
                         </div>
                         <!-- Account settings tab -->
diff --git a/theme_compassion_2025/static/src/utils/form_field_validator.js b/theme_compassion_2025/static/src/utils/form_field_validator.js
index 4ca29c4f7..74dd46b28 100644
--- a/theme_compassion_2025/static/src/utils/form_field_validator.js
+++ b/theme_compassion_2025/static/src/utils/form_field_validator.js
@@ -30,9 +30,22 @@ odoo.define("my_compassion.form_field_validator", function (require) {
             defaultErrorMessage: "Please enter a valid email address.",
         },
         phone: {
-            regex: /^\+?(\d[\d\s-]{5,}\d)$/,
+            regex: /^\+?(\d[\d\s-]{5,15}\d)$/,
             defaultErrorMessage: "Please enter a valid phone number.",
         },
+        name: {
+            // Allow international letters, space, dot, apostrophe, hyphen.
+            // Length: 2 to 50 characters.
+            regex: /^[\p{L} .'-]{2,50}$/u,
+            defaultErrorMessage: "Please enter a valid name (2-50 characters, no numbers).",
+        },
+        zip: {
+            // Allow ZIP codes to start with at most 2 letters, max 15 characters.
+            // Allowed 4802 (CH), 10115 (DE, FR, IT), SW1A 1AA (UK)
+            // Not allowed: rhiq9rq4q4, DEC1234
+            regex: /^([0-9]|[a-zA-Z]{1,2}[0-9\s-])[a-zA-Z0-9\s-]{1,14}$/,
+            defaultErrorMessage: "Please enter a valid ZIP/Postal code. (enter 0000 if not applicable)",
+        },
     };
 
     publicWidget.registry.FormFieldValidator = publicWidget.Widget.extend({

From 55782ca30fc20a4e3b62edbd618d11d7352a4737 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Wed, 11 Feb 2026 11:52:05 +0100
Subject: [PATCH 36/37] [T2904] FIX: GCA suggestions

---
 my_compassion/static/src/css/user_settings.css               | 4 ++--
 my_compassion/templates/pages/my2_new_sponsorship_wizard.xml | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/my_compassion/static/src/css/user_settings.css b/my_compassion/static/src/css/user_settings.css
index a5246f83b..297a56c83 100644
--- a/my_compassion/static/src/css/user_settings.css
+++ b/my_compassion/static/src/css/user_settings.css
@@ -135,7 +135,7 @@
         transform: rotate(0deg);
     }
     100% {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg);
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
     }
 }
diff --git a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
index 8db41eae2..e98221074 100644
--- a/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
+++ b/my_compassion/templates/pages/my2_new_sponsorship_wizard.xml
@@ -159,8 +159,8 @@ Page: My Compassion 2 New Sponsorship Wizard Page
                 name="phone"
                 class="form-control"
                 t-att-value="wizard.phone"
-                data-is-required="true"
                 data-validate-type="phone"
+                required=""
             />
         </t>
         <!-- Street -->

From 899110688b745efdb0d4f0f54eedc1febcaae276 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Wed, 11 Feb 2026 14:00:24 +0100
Subject: [PATCH 37/37] [T2902] REFACTOR: re-added user reference to user
 settings page

---
 my_compassion/templates/pages/my2_user_settings.xml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/my_compassion/templates/pages/my2_user_settings.xml b/my_compassion/templates/pages/my2_user_settings.xml
index 08b8966f9..19913e050 100644
--- a/my_compassion/templates/pages/my2_user_settings.xml
+++ b/my_compassion/templates/pages/my2_user_settings.xml
@@ -76,6 +76,14 @@ Injected data:
                                 class="bg-pure-white col-md-12 col-sm-12 position-relative"
                                 novalidate="novalidate"
                             >
+                                <div class="row col-12 mb-3">
+                                    <t t-call="theme_compassion_2025.FormFieldComponent">
+                                        <t t-set="label">My reference</t>
+                                        <div>
+                                            <t t-esc="partner.ref if partner.ref else ''" />
+                                        </div>
+                                    </t>
+                                </div>
                                 <div class="row col-12 mb-3">
                                     <t t-call="theme_compassion_2025.FormFieldComponent">
                                         <t t-set="label">Title</t>