Blazor Modal Form Validation: You've to click the cancel button twice to close the modal when you delete a form field

Question

In Blazor I'm using modal dialogs for CRUD. When I open a modal to edit a record and I delete (for example) the user name and then directly click the Cancel button, form validation still kicks in. The modal does not close.

I need to click the Cancel button again to close the modal.

I know I can put the cancel button outside the EditForm, but then you'll see a validation message flashing before the dialog closes. And I want my cancel button next to my submit button in the modal footer.

Is there any way to override the form validation when I press the Cancel button? And I'd rather not want to use JavaScript Interop, just plain Blazor.

Working Code Example:

@page "/cancel"
@using System.ComponentModel.DataAnnotations;

<h3>Cancel Validation</h3>

<button type="submit" class="btn btn-primary" @onclick="Login">Login</button>
<hr />
<p>Status: @status</p>

@if (showModal)
{
    <div class="modal" tabindex="-1" role="dialog" style="display:block" id="taskModal">
        <div class="modal-dialog shadow-lg bg-white rounded" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Login</h5>
                </div>
                <div class="modal-body">
                    <EditForm Model="user" OnValidSubmit="HandleValidSubmit">
                        <DataAnnotationsValidator />
                        <ValidationSummary />
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Email: </label>
                            <InputText class="col-8 form-control" @bind-Value="user.Email" />
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Password: </label>
                            <InputText type="password" class="col-8 form-control" @bind-Value="user.Password" />
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-secondary" @onclick="CancelSubmit">Cancel</button>
                        </div>
                    </EditForm>
                </div>
            </div>
        </div>
    </div>
}

@code {

    public class UserLogin
    {
        [Required(ErrorMessage = "Email is required")]
        public string Email { get; set; }

        [Required(ErrorMessage = "Password is required")]
        public string Password { get; set; }
    }

    UserLogin user = new UserLogin();

    bool showModal;
    string status;

    protected override void OnInitialized()
    {
        showModal = false;
        status = "Init";
        // for demo purposes, if you delete user.Email in the login dialog, you'll need to press 'Cancel' 2 times.
        user.Email = "[email protected]";
        user.Password = "12345";
    }

    private void Login()
    {
        status = "Show Login Modal";
        showModal = true;
    }

    private void HandleValidSubmit()
    {
        status = "Valid Submit";
        showModal = false;
    }

    private void CancelSubmit()
    {
        status = "Cancelled"; 
        showModal = false;
    }
}

Answer 1

Today I found a much more simpler solution... just use a <div> instead of <button> :)

So just change your cancel button to:

   <div type="button" class="btn btn-secondary" @onclick="CancelSubmit">Cancel</div>
               

The validation will not be triggered this way, but your serverside code will still be executed normally.

Answer 2

@Jaap, here's a solution that is based on the internals of Forms validation. I hope it'll satisfy you until a better solution is offered.

Forms validation support in Blazor, added to the EditContext object is performed on two level: object-level and field-level. When you click on the Submit button, the whole Model is validated. We've already seen that the Submit button works perfectly well, and does not allow you to submit unless the Model's fields' values are valid. When you hit the Cancel button and the Model's fields' values are valid, the dialog is closed without issue. But when one or more fields are having invalid values (as for instance, after clearing the email field), and you click on the Cancel button, a field-level validation instantly starts, before the code in the Cancel button's event handler has the slightest chance to do something. This behavior is by design and is repeated even when I used Fluent Validation instead of DataAnnotations validation. Conclusion: It is our limitations, not the system. We need to invest more time in learning Blazor. The solution I propose is to disable a field-level validation when we click on the Cancel button, and thus instantly close the dialog without any validation taking place at all.

Note: My code is using Fluent Validation as I was experimenting with Fluent Validation, but the same can be done with DataAnnotations Validation as well. The code in both cases is almost identical, and has really nothing to do with Fluent Validation. Note that I have adapted the Fluent Validation sample code by Chris Sainty

UserLogin.cs

public class UserLogin
{
    public string Email { get; set; }
    public string Password { get; set; }
}

UserLoginValidator.cs

public class UserLoginValidator : AbstractValidator<UserLogin>
    {
       public UserLoginValidator()
     {

         RuleFor(user => user.Email).NotEmpty().WithMessage("You must enter an email address");
         RuleFor(user => user.Email).EmailAddress().WithMessage("You must provide a valid email address");
         RuleFor(user => user.Password).NotEmpty().WithMessage("You must enter a password");
         RuleFor(user => user.Password).MaximumLength(50).WithMessage("Password cannot be longer than 50 characters");
    }
 }

FluentValidationValidator.cs

public class FluentValidationValidator : ComponentBase
{
    [CascadingParameter] EditContext CurrentEditContext { get; set; }
    [Parameter] public bool ShouldValidate { get; set; }

    protected override void OnInitialized()
    {
        if (CurrentEditContext == null)
        {
            throw new InvalidOperationException($"{nameof(FluentValidationValidator)} requires a cascading " +
                $"parameter of type {nameof(EditContext)}. For example, you can use {nameof(FluentValidationValidator)} " +
                $"inside an {nameof(EditForm)}.");
        }

        CurrentEditContext.AddFluentValidation(ShouldValidate);
    }
}

EditContextFluentValidationExtensions.cs

 public static class EditContextFluentValidationExtensions
{
    public static EditContext AddFluentValidation(this EditContext editContext, bool shouldValidate)
    {
        if (editContext == null)
        {
            throw new ArgumentNullException(nameof(editContext));
        }

        var messages = new ValidationMessageStore(editContext);

        editContext.OnValidationRequested +=
            (sender, eventArgs) => ValidateModel((EditContext)sender, messages);

        editContext.OnFieldChanged +=
            (sender, eventArgs) => ValidateField(editContext, messages, eventArgs.FieldIdentifier, shouldValidate);

        return editContext;
    }

    private static void ValidateModel(EditContext editContext, ValidationMessageStore messages)
    {
        var validator = GetValidatorForModel(editContext.Model);
        var validationResults = validator.Validate(editContext.Model);

        messages.Clear();
        foreach (var validationResult in validationResults.Errors)
        {
            messages.Add(editContext.Field(validationResult.PropertyName), validationResult.ErrorMessage);
        }

        editContext.NotifyValidationStateChanged();
    }

    private static void ValidateField(EditContext editContext, ValidationMessageStore messages, in FieldIdentifier fieldIdentifier, bool shouldValidate)
    {
        Console.WriteLine(fieldIdentifier.FieldName.ToString());

        if (shouldValidate)
        {
            var properties = new[] { fieldIdentifier.FieldName };
            var context = new FluentValidation.ValidationContext(fieldIdentifier.Model, new PropertyChain(), new MemberNameValidatorSelector(properties));

            var validator = GetValidatorForModel(fieldIdentifier.Model);
            var validationResults = validator.Validate(context);

            messages.Clear(fieldIdentifier);

            foreach (var validationResult in validationResults.Errors)
            {
                messages.Add(editContext.Field(validationResult.PropertyName), validationResult.ErrorMessage);
            }

            editContext.NotifyValidationStateChanged();
        }
    }

    private static IValidator GetValidatorForModel(object model)
    {
        var abstractValidatorType = typeof(AbstractValidator<>).MakeGenericType(model.GetType());
        var modelValidatorType = Assembly.GetExecutingAssembly().GetTypes().FirstOrDefault(t => t.IsSubclassOf(abstractValidatorType));
        var modelValidatorInstance = (IValidator)Activator.CreateInstance(modelValidatorType);

        return modelValidatorInstance;
    }
}

Cancel.razor

@page "/cancel"
@using System.ComponentModel.DataAnnotations;

<h3>Cancel Validation</h3>

<button type="submit" class="btn btn-primary" @onclick="Login">Login</button>
<hr />
<p>Status: @status</p>

@if (showModal)
{
    <div class="modal" tabindex="-1" role="dialog" style="display:block" id="taskModal">
        <div class="modal-dialog shadow-lg bg-white rounded" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Login</h5>
                </div>
                <div class="modal-body">
                    <EditForm Model="user" OnValidSubmit="HandleValidSubmit">
                        @*<DataAnnotationsValidator />*@
                        <FluentValidationValidator ShouldValidate="false" />
                        @*<ValidationSummary />*@
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Email: </label>
                            <InputText class="col-8 form-control" @bind-Value="user.Email" />
                            <ValidationMessage For="@(() => user.Email)" />
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Password: </label>
                            <InputText type="password" class="col-8 form-control" @bind-Value="user.Password" />
                            <ValidationMessage For="@(() => user.Password)" />
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-secondary" @onclick="CancelSubmit">Cancel</button>
                        </div>
                    </EditForm>
                </div>
            </div>
        </div>
    </div>
}

@code {
    UserLogin user = new UserLogin();

    bool showModal;
    string status;

    protected override void OnInitialized()
    {
        showModal = false;
        status = "Init";
        // for demo purposes, if you delete user.Email in the login dialog, you'll need to press 'Cancel' 2 times.
        user.Email = "[email protected]";
        user.Password = "12345";
    }

    private void Login()
    {
        status = "Show Login Modal";

        showModal = true;
    }

    private void HandleValidSubmit()
    {
        status = "Valid Submit";
        showModal = false;
    }

    private void CancelSubmit()
    {
        Console.WriteLine("CancelSubmit");

        status = "Cancelled";
        showModal = false;
    }
}

Note that the FluentValidationValidator component has a property named ShouldValidate which we set to false in order to remove field-level validation. Please, follow the flow of execution it's very simple. I almost do nothing to solve the issue, which make me think that perhaps there's a shorter and better way to do it. You may need to install Fluent Validation package... Good luck...