In this blog post, I will show you how to override the CSS in EditContext. For example, assume you already have the CSS classes for the error message. Then, when the blazor adds the validation error message, you want to override the class. You can do this very easily with the blazor app.
The blazor framework provides a class FieldCssClassProvider you can use to override the default CSS class that blazor applies to input control when a validation error occurs.
FieldCssClassProvider
Supplies CSS class names for form fields representing their validation state or other state information from an EditContext.
Let’s create a simple demo to understand this; as shown in the image below, I have added two custom classes, one for error and one for success.
To override the CSS, follow these steps.
- Create a model class and add the required
DataAnotation; as you can see, I have added Required and Range
public class ExampleModel
{
[Required]
[StringLength(10, ErrorMessage = "Name is too long.")]
public string? Name { get; set; }
[Required]
[Range(1,10)]
public int Age {get;set;}
}
- In the edit form, replace
Modelwith the private instance ofEditContext.
Form.razor
<style>
.custom-error{
border: 5px solid #ffdddd;
}
.custom-success{
border: 5px solid green;
}
</style>
<EditForm EditContext="_editContext" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<div>
<InputText id="name" @bind-Value="exampleModel.Name" />
<ValidationMessage For="() => exampleModel.Name" />
</div>
<div>
<InputNumber id="age" @bind-Value="exampleModel.Age" />
<ValidationMessage For="() => exampleModel.Age" />
</div>
<button type="submit">Submit</button>
</EditForm>
@code {
private ExampleModel exampleModel = new();
private string message="";
private EditContext _editContext;
protected override void OnInitialized(){
_editContext=new EditContext(exampleModel);
_editContext.SetFieldCssClassProvider(new CustomCssProvider());
}
private void HandleValidSubmit()
{
message="HandleValidSubmit called";
// Process the valid form
}
}
- Create a
CustomCssProviderclass; you can name it anything and inherits it from theFieldCssClassProviderclass and return the CSS classes that you want to use - After that, set the _editContext.SetFieldCssClassProvider(new CustomCssProvider());
CustomCssProvider.cs
public class CustomCssProvider:FieldCssClassProvider
{
public override string GetFieldCssClass(EditContext editContext,in FieldIdentifier fieldIdentifier){
var isValid=!editContext.GetValidationMessages(fieldIdentifier).Any();
if(editContext.IsModified(fieldIdentifier)){
return isValid? "custom-success" : "custom-error";
}else{
return isValid ? "": "custom-error";
}
}
}
```
>_Main.razor
```html
<h1>CodeGuru-Demo</h1>
<Form/>
@code {
}