Custom validation class in Blazor is not working as expected to apply CSS library validation styles.

To apply the Bootstrap validation styles in Blazor If we extend the FieldCssClassProvider as follows:

public class BootstrapValidationClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
    {
        bool isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "is-valid" : "is-invalid"; // Bootstrap validation class
    }
}

and use as follows:

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">

    <button type="submit">Submit</button>
</EditForm>

@code {
    private SetUserPasswordModel SetUserPasswordModel = new SetUserPasswordModel();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(SetUserPasswordModel);
        editContext.SetFieldCssClassProvider(new BootstrapValidationClassProvider());
    }

    private async Task HandleSubmit()
    {
      .....
    }
}

Then the form initially renders as follows:

Although the form inputs have not been touched yet, the validation has been applied this is because FieldCssClassProvider is setting is-valid class even before the form is touched which should not be. So currently setting a custom validation class of any CSS library would not work with this. I hope you understood. Validation state class should only be set if the input field is touched and actual validation is done.

To overcome this If do as follows:

public class BootstrapValidationClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
    {
        if (editContext == null)
        {
            throw new ArgumentNullException(nameof(editContext));
        }

        if (!editContext.IsModified())
        {
            return string.Empty;
        }

        bool isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "is-valid" : "is-invalid";
    }
}

Then “is-valid” and “is-invalid” classes are not applied on the form submit because on form submit without touching the input fields editContext.IsModified() returns false. If editContext.IsModified() would have returned true on form submit and marked all fields as modified then It would have worked as expected.

I have also found that there is no way to mark editContext as modified on the form submit. Angular and React have this option to mark the form and its inputs as modified on form submit manually.

Possible Solution:

1. Trigger the FieldCssClassProvider only if the input field is touched or the form is submitted.
2. Mark the editContext and all the inputs as modified if the form is submitted or add an option to mark editContext and all the inputs as modified on the form submit like Angular and React. Surprisingly, there is a EditContext.MarkAsUnmodified() method but no EditContext.MarkAsModified() method. How was that possible?. Adding EditContext.MarkAsModified() methods would solve the issue.

[VahidN]

@TanvirArjel
It works for me OnValidSubmit :

Do you know why? Because the validation system doesn’t care if you have touched anything or not. It cares about the defined validation rules such as [Required] and if it failed, it will mark the untouched field as an invalid one. That’s enough to show the validation messages and applying the related CSS classes. All of these steps happen during the call to the _editContext.Validate() of OnValidSubmit . If you are not using the OnValidSubmit event handler, you should call the editContext.Validate() method yourself. The posted solution prevents showing the is-valid class on initially loaded form.

[VahidN]

You can use the IsModified method on an input field too:

var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
if (editContext.IsModified(fieldIdentifier))
{
    return isValid ? "is-valid" : "is-invalid";
}
return isValid ? "" : "is-invalid";