Document `state.validating`

[MortenHe]

Describe the feature

It would be great if async validations would set a [data-pending] state on the outer wrapper of an input. Then I could include a "checking in background" spinner for a better user experience.

Now when I do an async api validation (e.g. checking if an email is already taken), I only have the invalid state to give a visual feedback.

Current behavior:

In step 2 it takes a moment for the backend to check if the email ist taken. As the state is invalid the css shows the invalid state and the user could think that the (valid) email can't be used and changes the value before getting the positive validation.

A more common case would be a unique Username. In online forums I usually start with "Morten". Then if it is taken I go on with "MortenHe" and so on. In this case I would see a red cross and go on typing even though the username might be ok (but the backend took too long to check).

My CSS for the red cross: [data-invalid] .formkit-wrapper::after { content: '🗙'; color: red;)

The desired behavior:

It is good that the state is still invalid during the background check but with an additional [data-pending] I could do some CSS tricks to get this design working.

I hope the example wasn't to confusing?

[justin-schroeder]

Hi @MortenHe — this actually does happen! You can find the data you’re looking for in context.state.validating here's an example: https://formkit.link/027d73ead6de5da09e766be49adeafd7

[MortenHe]

@justin-schroeder : Great, I really appreciate your help!

context.state.validating is just what I was looking for. Maybe I'm wrong but I couldn't find it on the formkit homepage using the ctrl-k search. It seems not to be part of the documentation?

Is this the right way to use a loading animation within a FromKitSchema? I used __raw__sectionsSchema:

link

Thanks in advance

[justin-schroeder]

Hmm — I think you're right actually. Lets fix that.