Validation message misalignment when using RadzenFormField and server-side validation in Blazor

Radzen.Blazor Components
1

Hello,

I'm implementing server-side validation in a Blazor Server application using RadzenFormField, and I'm experiencing a layout issue with validation messages.

I retrieve validation errors from the server as part of an API response and inject them into the form using Blazor's ValidationMessageStore. However, when a field is invalid, the message appears to the right of the input field (next to the label), rather than below the field — which is the expected and more readable position.

Here's a simplified code sample that reproduces the issue:

razor

CopierModifier

<RadzenFormField Text="Supplier Number">
    <RadzenTextBox @bind-Value="Item.SupplierNumber" Name="SupplierNumber" />
    <ValidationMessage For="@(() => Item.SupplierNumber)" class="validation-message" />
</RadzenFormField>

The validation errors are generated server-side and returned in the following format (e.g., as a ValidationProblemDetails object):

json

CopierModifier

{
  "errors": {
    "SupplierNumber": [ "Supplier number is required." ]
  }
}

Then, in the component, the errors are injected like this:

csharp

CopierModifier

foreach (var error in result.Problem.Errors)
{
    var propertyName = error.Key.Split('.').Last(); // handle keys like "MyDto.SupplierNumber"
    messageStore.Add(new FieldIdentifier(Item, propertyName), error.Value);
}
editContext.NotifyValidationStateChanged();

Even though the errors are correctly associated with the field and displayed by ValidationMessage, the visual placement is incorrect.

I’ve attempted to override the layout using CSS:

css

CopierModifier

.radzen-form-field {
    flex-direction: column !important;
    align-items: stretch !important;
}
.radzen-form-field .validation-message {
    display: block;
    margin-top: 4px;
    color: #d9534f;
    font-size: 0.875rem;
}

But it doesn't seem to work reliably, possibly due to inline styles or Radzen’s layout engine.

:small_blue_diamond: Question:
Is there an officially supported way to ensure validation messages injected via ValidationMessageStore are displayed below the corresponding field, while still using RadzenFormField?

Thank you very much for your help and support.

2

You can check the validation demo which shows where to put the validator in a form field: Blazor FormField Component | Free UI Components by Radzen

  <RadzenFormField Text="Last Name" Variant="@variant">
       <ChildContent>
           <RadzenTextBox Name="LastName" @bind-Value=@model.LastName />
       </ChildContent>
      <Helper>
           <RadzenRequiredValidator Component="LastName" Text="Last name is required." />
      </Helper>
</RadzenFormField>