form_data_invalid_error not working

[Dazryn]

Checklist

• I could not find a solution in the existing issues or docs.
• I agree to follow this project's Code of Conduct.

Describe the bug

The form_data_invalid_error error message is not displayed despite the response containing:
error: { code: "form_data_invalid_error", message: "Form data invalid." }

Reproducing the bug

I have defined two error messages, among others: flowErrors.value_invalid_error and flowErrors.form_data_invalid_error. When I enter an invalid email, such as a1@b2.c3, the response is:

{
"name": "login_init",
...
"error": {
"code": "form_data_invalid_error",
"message": "Form data invalid."
}
}

However, the error message from flowErrors.value_invalid_error is displayed instead. In my opinion, this is incorrect.

Logs

No response

Configuration

No response

Hanko Version

@teamhanko/hanko-elements@1.3.0

OS Hanko Backend

None

OS Version Hanko Backend

No response

OS

None

OS Version

No response

Browser Version

No response

Environment

None

Additional Context

No response

[yashmakesar07]

@MKrasmik Can you please specify more on how to reproduce this bug?

[Dazryn]

The issue is that an incorrect error message appears during login.

I define two translations for errors:

de.flowErrors.value_invalid_error = 'Falsches Passwort. Bitte erneut versuchen.';
de.flowErrors.form_data_invalid_error = 'Die E-Mail-Adresse ist ungültig.';

Now, when I enter an invalid email address, I expect the error de.flowErrors.form_data_invalid_error to be displayed. However, de.flowErrors.value_invalid_error is shown instead.

When looking at the validation response, the following is returned: "code": "form_data_invalid_error".

[Dazryn]

The problem still exists!

[bjoern-m]

Hi @MKrasmik

Thank you for reporting this issue and including steps to reproduce it.

When an invalid email like "a1@b2.c3" is submitted, the API returns two errors:

• A top-level error: "form_data_invalid_error" with the message "Form data invalid."
• A field-specific error under inputs.email: "value_invalid_error" with the message "The value is invalid."

Hanko-Elements is displaying the field-specific error ("value_invalid_error") above the email input, using its translation 'Der eingegebene Wert ist ungültig'. This makes sense since it’s tied to the email field and provides enough context for the user, especially with only one input field per page. In your case the translation would be 'Falsches Passwort. Bitte erneut versuchen.', which would only be correct, when the user has entered a wrong password.

I understand you expected the top-level "form_data_invalid_error" translation ('Die E-Mail-Adresse ist ungültig.') to show instead, since it’s in the API response. However, Hanko-Elements is designed to prioritize field-specific errors for clarity, which aligns with having a single input here.

Using a generic translation like 'Der eingegebene Wert ist ungültig.' for "value_invalid_error" should work well and reduces the need for multiple specific translations.

To avoid confusion, you could update your translations to keep them simple and generic, like:

• de.flowErrors.value_invalid_error = 'Der eingegebene Wert ist ungültig.'
• de.flowErrors.form_data_invalid_error = 'Die Daten sind ungültig.'

This way, the displayed message stays relevant and you won’t need overly specific translations for every case.