I've currently started to use Bootstrap 5 and .Net Core MVC. I've come to a stop trying to understand 2 things.

• The Event that is triggered to show client validation errors
• using tag helpers provided by .net core to auto generate html.

I've come to what I would like to show on UI, mainly error messages, client validation works, but with bootstrap 5, there seems to be more html needed to show the validation errors, show below.

<div class="input-group input-group-outline is-valid mb-3">
  <label asp-for="Username" class="form-label"></label>
  <input asp-for="Username" type="email" class="form-control">
</div>

<span class="invalid-feedback">
  <span asp-validation-for="Username" class="text-danger"></span>
</span>

<div class="input-group input-group-outline is-valid mb-3">
  <label asp-for="Password" class="form-label"></label>
  <input asp-for="Password" type="password" class="form-control">
</div>

<span class="invalid-feedback">
  <span asp-validation-for="Password" class="text-danger"></span>
</span>

What I would like to do, is instead of adding "invalid-feedback", to automatically add it to the form only when errors are "triggered", and that's where I would like to know where i can intercept the trigger for the validation to add that custom html.

If there is no way to go about this, I'd also like to know if anyone could do this with taghelpers (i.e. check if there are 'data-val..' meta-data), and from that use the taghelper to add the "Invalid-Feeback" to the UI.

Preferable Id like the client validation way, cause I would also like to change that "is-valid" for the input group div to "is-invalid" when ever there is validation errors(this change the colour of the input.)

Thanks all, if you do need some code snippets, will happily provide them.

Here is a reference on how error messages are shown in Bootstrap validation check the server side validation.