How to display error messages from server side fluent validation AND client side validation at the same time?

Question

I have this fluent validation rule:

public EmployeeAbsenceValidator() {
    RuleFor(a => a.DateTo)
        .GreaterThanOrEqualTo(a => a.DateFrom)
        .WithMessage("The end date cannot be before the start date.");
}

In the Create POST-method in the controller, I'm validating the dates and saving to the database and redirecting to a details view for the employee if the dates are valid, or returning to the create-absence-view if they are not:

if (ModelState.IsValid)
{
    EmployeeAbsenceValidator validator = new EmployeeAbsenceValidator();
    ValidationResult result = validator.Validate(employeeAbsence);
    if (result.IsValid)
    {
        _context.Add(employeeAbsence);
        await _context.SaveChangesAsync();
        return RedirectToAction("Details", "Employees");
    }
    else
    {
        result.AddToModelState(ModelState, null); // Passing error message to model state
        return View(employeeAbsence);
    }
}

This is the create-absence-view:

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="row">
        <div class="form-group col-md-4">
            <label asp-for="Percentage" class="control-label"></label>
            <input asp-for="Percentage" class="form-control" />
            <span asp-validation-for="Percentage" class="text-danger"></span>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-md-6">
            <label asp-for="DateFrom" class="control-label"></label>
            <input asp-for="DateFrom" class="form-control" />
            <span asp-validation-for="DateFrom" class="text-danger"></span>
        </div>
        <div class="form-group col-md-6">
            <label asp-for="DateTo" class="control-label"></label>
            <input asp-for="DateTo" class="form-control" />
            <span asp-validation-for="DateTo" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" value="Save">Save</button>
    </div>
</form>

If Percentage is filled in correctly, and the DateTo is prior to DateFrom, the error message from fluent validation is shown on the date. But if the Percentage is not valid, only the client side error message on Percentage is shown. I guess that's because the server does'nt know about the invalidity of the dates, seeing as the form hasn't been submitted yet. How can I get both error messages? (Please tell me I don't need to write any JQuery...)

You cannot. The only thing you can do is implement the same validation client-side, and yes, that requires jQuery, as the client-side validation utilizes the jQuery Validation library. — Chris Pratt

Sinan Bozkuş Sinan Bozkuş · Accepted Answer · 2019-05-13T18:47:06

FluentValidation is a server-side framework. Not all rules defined in FluentValidation will work with ASP.NET’s client-side validation. But you can add client-side validation support to Fluent Validation with Form Helper library.

https://github.com/sinanbozkus/FormHelper

Add FormHelper from Nuget Package Manager to your project.

Register FormHelper in your startup.cs

services.AddFormHelper();

Create your forms like this:

var formConfig = new FormConfig(ViewContext)
{
    FormId = "ProductForm",
    FormTitle = "New Product",
    Callback = "ProductFormCallback" // optional,
};

// <form id="@formConfig.FormId" asp-controller="Home" asp-action="Save"
// ...

@await Html.RenderFormScript(formConfig)

And use this attribute on your save action for client-side validation:

[HttpPost, FormValidator]
public IActionResult Save(FormViewModel viewModel)

It's ready for usage.

You can look the github page for more information.

How to display error messages from server side fluent validation AND client side validation at the same time?

1 Answers