After gaining some experience with Razor, I decided to explore Blazor. However, I encountered a familiar challenge - integrating validation with Bootstrap. The issue lies in the mismatch between Blazor's validation result classes and those of Bootstrap.
In the past, I was able to override class names in Razor by adding specific code to the _ValidationScriptsPartial.cshtml file:
const settings = {
valid: 'is-valid',
invalid: 'is-invalid'
/* additional classes can be included here */
}
$.validator.setDefaults(settings)
$.validator.unobtrusive.options = settings
While searching for solutions, I discovered that many resources suggested simply copying Bootstrap styles and substituting class names (such as this example). Is there a more efficient approach to achieve this integration without duplicating all Bootstrap validation styles? I would prefer to avoid this method as it would entail repetition whenever Bootstrap is updated.
It's puzzling that the default Blazor app template is pre-configured to cooperate with Bootstrap, making this discrepancy all the more surprising.