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.

[filips123]

How to apply these variants when label text is inside input?

I tried adding user-valid:validator and user-invalid:validator to the label element (https://play.tailwindcss.com/to5tiXLOF5), the span element (https://play.tailwindcss.com/mT0L7MwycR) and the input element (https://play.tailwindcss.com/jwQIdIsXzx), but neither of them work. I also tried adding has[:user-invalid]:validator to the label element (https://play.tailwindcss.com/6pZBWzDGRt) and the other two elements, but that also doesn't work.

The first option works for the normal validator though, so the problem might be that the user-(in)valid state doesn't get passed to the label element.

[adwiv]

The syntax is has-[:user-valid]:validator and not has[:user-valid]:validator. Note the hypen after has.

[adwiv]

That said, I use a custom css class for my original purpose (input validation without success colors) which also takes care of the aria-invalid attribute.

.input-validator {

    &:user-invalid,
    &:has(:user-invalid),
    &[aria-invalid]:not([aria-invalid="false"]) {
        @apply validator;
    }
}

[filips123]

Thanks for the suggestion, that works fine!

I also ported your class to Tailwind utilities, so Tailwind can remove them if unused (which doesn't seem to be the case if they are normal classes):

@utility validator-valid {
  &:user-valid,
  &:has(:user-valid) {
    @apply validator;
  }
}

@utility validator-invalid {
  &:user-invalid,
  &:has(:user-invalid),
  &[aria-invalid]:not([aria-invalid="false"]) {
    @apply validator;
  }
}