Suggestion: Wrapper classes for errors and messages about formkit HOT 4 CLOSED

@antemarkic Thanks for the suggestion. We did this in vue formulate by adding a data attribute data-is-valid, and data-has-error this is nice because it leaves the class system free/clear for people who want to write their own class solutions. We could pretty easily re-create that same tooling here in FormKit.

Let’s add it to the roadmap.

from formkit.

@antemarkic this is release-ready and will be published with 1.0.0-beta.3. Here's an example of it running on beta.3:

https://formkit.link/cb85162e120c9de18e0298dbd8ca849e

Basic rules:

data-complete

True when these conditions are met:

Either:

• The input has validation rules
• The validation rules are all passing
• There are no errors on the input
  Or:
• The input has no validation rules
• The input has no errors
• The input is dirty and has a value

This is not intended to be used on forms/groups/lists but instead on individual inputs. Imagine placing a green checkbox next to each input when the user filled it out correctly — thats what these are for.

data-invalid

Added when the input has failing validation messages and those messages are being displayed !context.state.valid && context.state.validationVisible

data-errors

Added whenever explicitly set errors are on the input, either via a parent (like setErrors() from the form), or directly via the :errors prop.

from formkit.

Hi, @justin-schroeder.
While adding built-in attributes is a nice feature, If message uses the transition tag, the style changes ugly, is there any way to add a custom class?

I'm sorry, that's what I wanted to say yesterday. Now that I've handled the transition hook manually, it would be nice to have a built-in API

from formkit.

You can modify this behavior on your own — although I'm still not exactly sure what behavior you're looking to modify. Perhaps you could make a playground at https://formkit.com/playground with an example of the transition you are attempting and what you are wanting to achieve and then I can assist from there. Thanks @aegorx!

from formkit.