Input validation without success colors

[adwiv]

Note: Post modified based on suggestions from saadeghi who offerred much better solution.

I like to use validation in my forms to highlight the invalid fields in error/red color, but really dislike that it also highlights the valid fields in green/success colors. Even when the entire form is valid, for a split second we can see the green highlights when the form is submitted. Bootstrap worked this way too.

What I want is:

1. Only the invalid fields should be marked and valid fields should retain original border colors.
2. Invalid fields should revert to original color when they become valid.

Updated Solution:

Use user-invalid:validator instead of validator on form fields or has[:user-invalid]:validator if the validator is applied on an element (like label for example) that contains the field.

Older Solution

On checking the code, it appears that the input highlighting is managed through --input-color variable which gets set to --error-color if field is :user-invalid and --success-color if the field is valid. By removing the CSS for :user-valid (or reverting it) we can handle point 1. But once --input-color gets overwritten when field is :user-invalid, we can't get back to original color as it is lost. Moreover, the original --input-color can take a lot of different values.

So the route I took is:
1. Duplicate --input-color to --input-base-color at all the places it is being set.
2. When the field is :user-valid, set the --input-color to --input-base-color

This solution seems to be working though I haven't tested it extensively. Here are the screenshots for comparison. Both screenshots are after clicking the submit button which results in all fields being validated.

~Here are the links:
CSS file for inclusion in app.css
Sample with Html and CSS

[saadeghi]

Try user-invalid:validator instead of validator.
I will add more examples to the docs soon, including this.

[adwiv]

Wow.. Thanks a lot @saadeghi. I didn't know we can use something like this.