async server-side validation for complete form?

[FelixSchwarz]

I'm trying to add a validator which receives all form inputs and will return the validation state asynchronously. Unfortunately I did not yet find something in the docs on how to do that.

Just to be clear:

• My validation should be triggered just like any other field-level validation in FormKit.
• I need to access all form values in my custom validation function. These will be sent to the same endpoint on the server.
• Then I need to set the validation state manually but I saw some hints on how to do that.

What I found:

• A custom async validation function (as shown in the "Essentials / User Interface" examples) actually gets a Node(?) instance which has a .parent. So in the end I can access all form values I guess.
• However that requires me to configure a special validator for each field? (That validator would then trigger form-level validation on the server.) I was hoping to see some support for "form-level validators".

I'd be glad for any pointers. Bonus points if you can tell me which parts of the docs I should have read more carefully. :-)

[justin-schroeder]

so basically this would be like a validation rule for the whole form? You can actually put validation rules on the <FormKit type="form"> but I suppose what im unclear about is whether or not this is what you are really looking for, or if you just want to handle form-submitted data via server side validation and then display the results back on the inputs?

[FelixSchwarz]

Thanks for the reply. I'll try to rephrase my idea.

Currently (without Formkit/vue.js) the page does it like this:
Whenever a "validation" is triggered (e.g. on blur), JavaScript gathers all field values and sends a HTTP request to the server. The endpoint will never perform the action but just returns the validation result (as json). Then the JS set the field state according to the validation result sent from the server.

Now I want to get rid of that outdated JS and replace it with vue.js + FormKit. I assumed the easiest way to reimplement the client-side part was to add a custom validation function which takes care of the HTTP request and set the field states.

For validation, I always need to send all form fields together. I can modify the format of the server JSON response as long as I don't have to touch the actual server-side validation logic.

So maybe that's a long winded-way of saying "just want to handle form-submitted data via server side validation" with the added twist that validation requests must be a tiny bit special (extra HTTP parameter) so that the server does not actually perform the action.

However now that I think about this the extra parameter could just be a hidden field which is set by default but removed when the form is actually submitted.

So, maybe I just need to do form submission with JS and handle results. Is that something FormKit provides out of the box (or some helpers to build something like that)?

[justin-schroeder]

I think im following. You can do what you are suggesting by writing a custom validation rule on the form itself. It already has all the values of the form, so it would just send those requests every time a value changes (you might want to use the debounce validation hint to lower the request count). This would make it easy to know that "something" is wrong in the form but surfacing those issues in the correct places would be hard. You can of course do this all manually with FormKit, dont use an actual validation rule, but instead just watch for a change and then explicitly place errors messages on the related fields using setErrors() — I dont love this approach either though.

In an ideal world I would vouch for having both client side validation and server side validation. In that case you would have in-browser validation rules that run as the user is filling out the form, and these rules would be near-instant (no http request) — and perhaps a few server based ones if necessary (checking if a username is taken for example). Then when the user submits the form you would do the bulk of the validation. FormKit tries to make adding those client side validations as easy as possible so your overall UX is good, but I do understand this would be a bit of a departure from where your setup currently is.

[FelixSchwarz]

Yes, I'm still think what is the easiest way for us to add more client-side validation without having to implement the validation rules twice. Maybe auto-generating some schema based on the server-side validators...

Anyway, is there some documentation on how to write a validation rule for the form? Probably it is obvious once you know at least a bit about FormKit but alas - I'm not there yet.

[justin-schroeder]

Validation in FormKit works the same at any level of the stack so the only documentation you really need to read is the main validation page. That said the context of the architecture page will help too.

Since you aren’t really doing things the "formkit" way (declarative/functional/side effect free) youll probably need to introduce some side effects in your validity loop. Here’s a simple example I worked up for you:

https://formkit.link/67a7d340d465c11fca323b9a3a884fce

[FelixSchwarz]

Thanks a lot!