T2591 extend usage of form field validator #230

EliasKeller · 2025-12-16T13:48:47Z

Description

This PR introduces a centralized client-side validation system for form fields and rolls it out across all forms using the theme components.
It evolved out of the previous validation PR and unifies validation behavior and UI states across the theme.

User Settings:

New Sponsership (Step 1):

New Sponsership (Step 2):

And all the other fields and forms....

What was implemented

Centralized all validation logic into
theme_compassion_2025/static/src/utils/form_field_validator.js
Validation is now applied everywhere where:
- theme_compassion_2025.FormFieldComponent or
- theme_compassion_2025.SelectComponent
  is used
Validation runs on user interaction:
- blur for inputs
- change for selects
Fields expose their validation widget via .data("widget")
so validation can also be triggered externally if needed

How validation is enabled

Validation is active when a field has:

required and/or
a validation config via data-validate-type

Example:

<input
    type="email"
    id="email"
    name="email"
    class="form-control"
    t-att-value="partner.email"
    t-att-data-original-value="partner.email"
    data-validate-type="email"
    required=""
/>

Supported validation types

required
email
phone

UX behavior

Required fields automatically get an asterisk (*) in the label
Invalid fields receive the is-invalid class
Inline error messages are displayed next to the field
Select fields are handled correctly (error is placed after the SelectComponent wrapper)

Extending validation

Validation can be extended easily by adding a new entry to validationConfig in
form_field_validator.js.

Each validation type only needs:

a regex
a defaultErrorMessage

The new validation can then be used via:

data-validate-type="your_type"

Notes

All validation logic is handled in one place
Validation is already rolled out across all forms using the theme components
No form-specific validation logic is needed anymore
evolved out of this PR

…izard.js

…er in my2_new_sponsorship_wizard.js

…s/form_field_validator.js

…izard.js

…er in my2_new_sponsorship_wizard.js

…s/form_field_validator.js

…sership-form' into T2586-phone-number-check-in-sponsership-form # Conflicts: # theme_compassion_2025/templates/components/FormField.xml

…-sponsership-form T2586 phone number check in sponsership form

gemini-code-assist · 2025-12-16T13:49:09Z

Summary of Changes

Hello @EliasKeller, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the client-side form validation system by introducing a new, reusable FormFieldValidator widget. This change centralizes validation logic for common field types like required inputs, email addresses, and phone numbers, moving away from scattered, manual validation. The new system standardizes how errors are displayed to the user and simplifies the integration of validation into various form components, leading to a more consistent and maintainable codebase.

Highlights

Centralized Form Validation: Introduced a new FormFieldValidator widget to centralize and standardize client-side form validation logic for required fields, email, and phone numbers.
Refactored Validation Logic: The _validateForm function in my2_new_sponsorship_wizard.js was refactored to utilize the new FormFieldValidator widget, delegating validation responsibilities to the dedicated component.
Standardized Error Display: The new validator handles the dynamic display of inline error messages and the application of the is-invalid class, removing previous ad-hoc error handling from individual form components.
Component Integration: The FormField.xml component was updated to use the form-field-component class, allowing the new validator to target and manage its child inputs. Select components now pass is-required status via data attributes.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces a reusable FormFieldValidator widget and refactors the new sponsorship wizard to use it, which is a great step towards centralizing validation logic and improving code maintainability. The implementation of the new widget is solid, but I've identified a critical issue regarding how data- attributes are accessed, which would prevent the validator from working as intended. I've also noted a minor inefficiency with event handling. Once these points are addressed, this will be an excellent enhancement.

theme_compassion_2025/static/src/utils/form_field_validator.js

… for sponsorship-wizard

EliasKeller · 2025-12-23T13:58:09Z

/gemini-review

gemini-code-assist · 2025-12-23T13:58:20Z

It looks like you tried to invoke a command, but there was a typo. The correct command for a code review is /gemini review. Please use that if you'd like me to perform a review.

EliasKeller · 2025-12-23T14:25:52Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces a centralized client-side validation system for form fields, which is a significant improvement for code maintainability and UI consistency. The changes are well-structured, including a new Odoo widget for validation, updated CSS for error states, and refactoring of existing forms and JavaScript to use the new system. My review focuses on ensuring the new validation logic is applied consistently and correctly across all components. I've identified a couple of high-priority issues related to inconsistent handling of required fields and a missing attribute that impacts accessibility. I've also included a medium-severity suggestion to improve code clarity. Addressing these points will make the new validation system more robust and reliable.

gemini-code-assist · 2025-12-23T14:27:34Z

my_compassion/templates/pages/my2_new_sponsorship_wizard.xml

+            <input
+                type="email"
+                name="email"
+                class="form-control"
+                t-att-value="wizard.email"
+                data-validate-type="email"
+                required=""
+            />


The id attribute is missing from this email input field. The parent FormFieldComponent defines a label with for="email", which requires the input to have a matching id for accessibility (e.g., for screen readers) and for the common UX pattern of clicking the label to focus the input field.

<input id="email" type="email" name="email" class="form-control" t-att-value="wizard.email" data-validate-type="email" required="" />

gemini-code-assist · 2025-12-23T14:27:34Z

my_compassion/templates/pages/my2_new_sponsorship_wizard.xml

+                data-is-required="true"
+                data-validate-type="phone"


This phone input uses data-is-required="true" to mark it as a required field, but the new validator in form_field_validator.js only checks for the standard required attribute/property. This means the field will not be validated as required, which seems to contradict the intention here. To ensure this field is validated correctly, you should either replace data-is-required="true" with required="" or update the validator to also check for the data-is-required attribute (a suggestion for this has been made on form_field_validator.js).

gemini-code-assist · 2025-12-23T14:27:34Z

theme_compassion_2025/static/src/utils/form_field_validator.js

+            this.$el.data("widget", this);
+
+            this.$input = this.$("input, select");
+            this.isRequired = this.$input.prop("required");


There's an inconsistency in how required fields are marked across the codebase. Some use the standard required attribute, while others use data-is-required="true" (e.g., the phone field in my2_new_sponsorship_wizard.xml and the SelectComponent). However, the validator currently only checks for the required property.

This is also hinted at by the TODO comment in Select.xml which suggests removing t-att-required. To unify the behavior and support both methods, I suggest updating the isRequired check to consider both the property and the data attribute. This will ensure all fields intended to be required are validated correctly.

Suggested change

this.isRequired = this.$input.prop("required");

this.isRequired = this.$input.prop("required") || this.$input.data("is-required");

gemini-code-assist · 2025-12-23T14:27:34Z

my_compassion/static/src/js/my2_user_settings.js

+            const clearErrors = () => {
+                let isValid = true;
+
+                $(form)
+                    .find(".form-field-component:visible")
+                    .each(function () {
+                        const fieldWidget = $(this).data("widget");
+                        fieldWidget.clearError();
+                    });
+
+                return isValid;
+            };


The clearErrors function initializes isValid to true and returns it, but this variable is never modified, and its returned value is not used in the calling code. This makes the code slightly misleading. Additionally, fieldWidget.clearError() could throw an error if fieldWidget is undefined. To improve clarity, remove the unused isValid variable and add a guard clause to ensure fieldWidget exists before calling methods on it.

const clearErrors = () => { $(form) .find(".form-field-component:visible") .each(function () { const fieldWidget = $(this).data("widget"); if (fieldWidget) { fieldWidget.clearError(); } }); };

EliasKeller and others added 21 commits August 18, 2025 13:09

[T2586]: basic regex validation phone nubmer in my2_new_sponsorship_w…

3d6d980

…izard.js

[T2586]: basic regex validation email in my2_new_sponsorship_wizard.js

cb65fcb

[T2586] FEAT: add event (onBlur) binding for the email and phone numb…

6158473

…er in my2_new_sponsorship_wizard.js

[T2586] FEAT: started to build a centralized field validation in util…

5da7fec

…s/form_field_validator.js

[T2586] FEAT: included Selection and made field validation configurable

beabe75

[T2586] REFACTOR: added comments where needed

dc82b83

[T2586] refactoring

b6c74a2

[T2586] refactoring

e26d963

[T2586] pre-commit

e4f0d8d

[T2586]: basic regex validation phone nubmer in my2_new_sponsorship_w…

adf0afc

…izard.js

[T2586]: basic regex validation email in my2_new_sponsorship_wizard.js

1514502

[T2586] FEAT: add event (onBlur) binding for the email and phone numb…

eb120c0

…er in my2_new_sponsorship_wizard.js

[T2586] FEAT: started to build a centralized field validation in util…

2e81ff6

…s/form_field_validator.js

[T2586] FEAT: included Selection and made field validation configurable

9295535

[T2586] REFACTOR: added comments where needed

c0b461d

[T2586] refactoring

7772e95

[T2586] refactoring

ed809ed

Run pre-commit formatting

b246757

Merge remote-tracking branch 'origin/T2586-phone-number-check-in-spon…

0733524

…sership-form' into T2586-phone-number-check-in-sponsership-form # Conflicts: # theme_compassion_2025/templates/components/FormField.xml

merging

8717a7e

Merge pull request #229 from CompassionCH/T2586-phone-number-check-in…

972253d

…-sponsership-form T2586 phone number check in sponsership form

gemini-code-assist bot reviewed Dec 16, 2025

View reviewed changes

theme_compassion_2025/static/src/utils/form_field_validator.js Outdated Show resolved Hide resolved

theme_compassion_2025/static/src/utils/form_field_validator.js Outdated Show resolved Hide resolved

theme_compassion_2025/static/src/utils/form_field_validator.js Show resolved Hide resolved

EliasKeller added 7 commits December 17, 2025 14:16

[T2591] FEAT: make validation available globally for my_compassion 2.0

fda444e

[T2591] FEAT: validate user settings

c55696d

[T2591] FEAT: append backend error to specific field

026fcd4

[T2591] REFACTOR: pre-commit

b6ebcf3

[T2591] REFACTOR: remove unnecessary css invalid class specified only…

5931ada

… for sponsorship-wizard

[T2591] REFACTOR: kabab case to camel cas in data DOM object

3ed155c

[T2591] REFACTOR: pre-commit

3e31652

[T2591] REFACTOR: pre-commit

4ca9cd9

EliasKeller marked this pull request as ready for review December 23, 2025 13:57

gemini-code-assist bot reviewed Dec 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

T2591 extend usage of form field validator #230

T2591 extend usage of form field validator #230

Uh oh!

EliasKeller commented Dec 16, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Dec 16, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

EliasKeller commented Dec 23, 2025

Uh oh!

gemini-code-assist bot commented Dec 23, 2025

Uh oh!

EliasKeller commented Dec 23, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Dec 23, 2025

Uh oh!

gemini-code-assist bot Dec 23, 2025

Uh oh!

gemini-code-assist bot Dec 23, 2025

Uh oh!

gemini-code-assist bot Dec 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	this.isRequired = this.$input.prop("required");
	this.isRequired = this.$input.prop("required") \|\| this.$input.data("is-required");

T2591 extend usage of form field validator #230

Are you sure you want to change the base?

T2591 extend usage of form field validator #230

Uh oh!

Conversation

EliasKeller commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

User Settings:

New Sponsership (Step 1):

New Sponsership (Step 2):

What was implemented

How validation is enabled

Supported validation types

UX behavior

Extending validation

Notes

Uh oh!

gemini-code-assist bot commented Dec 16, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

EliasKeller commented Dec 23, 2025

Uh oh!

gemini-code-assist bot commented Dec 23, 2025

Uh oh!

EliasKeller commented Dec 23, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

EliasKeller commented Dec 16, 2025 •

edited

Loading