Optionally locally disable ValidationSuccess

[janseris]

Is your feature request related to a problem? Please describe. I am trying to hide ValidationSuccess on a form field (locally for only some fields!) in a clean way. Currently, it can be partially achieved using css hacks but that turns very complicated/impossible when trying to restore default border color and default border shadow etc to simulate that the is-valid CSS class which is applied to create the validation effect is actually not applied.

Describe the solution you'd like A way to disable ValidationSuccess effect on a form field but at the same time preserve ValidationError effect and the validation. Removing/not adding the ValidationSuccess element or adding properties to it does not help.

Applying a css class like this can modify the ValidationSuccess look. However it is hard to unset/hide it cleanly this way.

/* for Blazorise form validation input fields */
.form-control.is-valid.no-validation-success {
    background-image: none; 
    border-color: original??
}

Setting border-color to inherit/initial/unset yields different result than the original look (probably the same problem for border shadow)

[stsrki]

Did we talk on Discord about this? 😅

The solution is to do

.form-control.is-valid.no-validation-success {
    background-image: none; 
    border-color: var(--b-theme-success, #28a745);
}

[janseris]

Did we talk on Discord about this? 😅

The solution is to do

.form-control.is-valid.no-validation-success {
    background-image: none; 
    border-color: var(--b-theme-success, #28a745);
}

Edit: yes on Discord, thank you for kind and quick help.

What about different CSS provider? Blazorise supports Bootstrap, Bulma, Material, or AntDesign

I mainly focus on switching between Bootstrap and Material design for the future as Bootstrap looks very basic.

[stsrki]

For all providers, the CSS variable name is the same --b-theme-success. The only difference is that #28a745.

[janseris]

For all providers, the CSS variable name is the same --b-theme-success. The only difference is that #28a745.

Thanks, then the last bit would be the shadow, do you please have a quick tip for the css property name? I am having hard time catching it via Dev Tools because when I unfocus the HTML element to check Dev Tools, the focus and the style disappears. It's the style which is applied when the input field is focused - light blue as default, green shadow in validation success state

[stsrki]

You can inspect it like this

[janseris]

I'm sorry but with your help - with the variable - I get the border color still green and it's a weird hack. I could do all css myself and technically not use Blazorise at all and code all css switches myself with vanilla Blazor and HTML but this is why I like Blazorise and why I use it. This is why I am asking for such a feature request. Me code the business functionality and UI declaratively, Blazorise do the UI stuff low-level and the right and robust way.

best I could do is hardcode it like this to get the default focused box shadow and I am getting black border and not the default light gray:

/* for Blazorise form validation input fields */
.form-control.is-valid.no-validation-success {
    background-image: none;
    border-color: var(--b-theme-success);
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
*/}

with this hardcoding I have probably to override also :focus style and idk what more beacause I am not familiar with the internals of Bootstrap and I also don't want and need to - not my job. Multiple hours for such a little thing as to remove validation success.

[stsrki]

Well, usually, the shadow color is automatically done with the theming system. But since you're modifying some parts there are no ways around it than manual CSS.

[janseris]

there are no ways around it than manual CSS.

And also another option is if Blazorise supported it out of the box.

[stsrki]

It would make little sense because only Bootstrap and Bulma contain an icon on validation inputs. Other providers don't have it. So that feature would be redundant to have.

[WolfgangKluge]

A bit late to the party, but you can create a custom ClassProvider (inherit e.g. from Bootstrap5ClassProvider) and overwrite ToValidationStatus or (more fine-grained) a *Validation-member (e.g. TextEditValidation) to return null on success.

Don't forget to register your custom class provider services.AddSingleton<IClassProvider, CustomClassProvider>().

It's all-or-nothing - but for my needs it was sufficcient.

[stsrki]

Closing the ticket.