UI and Validations are completely different concerns. I would stay away from anything that's tied directly into one UI framework or another.
Presentation is one thing, and validation stands on its own, and you really don't want to mix the two together. Your presentation layer should only be using the output of your validations, nothing more.
I wrote a framework named Vest (also mentioned in another comment), which takes this approach into practice and separates your UI from your validation logic. You might like it.
I've read it over twice now, but near as I can tell, it doesn't have anything to do with Forms. It's model-validation which 1) Yup does the same job more concisely, and 2) most devs (read: me) hate writing unit tests so much that the similar syntax is actually a minus :)
The annoying part of forms validation is wiring up the actual input and form event handlers without loads of boilerplate, and mapping -- changing an known-good model to/from something the webbrowser elements understand.
Vest seems more similar to Yup than anything else.
I can see where you're coming from. Yup and other schema validation libraries are great, and there is nothing much you can do with Vest that you can't do with them. They may even do it more concisely.
That's not my argument for using Vest.
You are right, though. Vest is not a perse form validation library, but it is also not a strictly data-model validation library.
It is not a data model validation library since it does not validate the structure of your data. You do not provide a schema to be validated, but instead describe different tests for your data - and the difference between the two is quite large.
If I had to put describe Vest in a sentence I would say something like: "App logic data validations".
The reason for this distinction is simple: Vest does a little more than just validate your data. It also gives you the tools and structure to handle your validations in your feature itself.
An inherent part of every Vest test is the error message displayed to the user upon failure, and since you can write multiple tests for the same field, you can present different error messages per field.
Vest gives you the ability to only validate some fields, for example - only the field that the user currently interacts with.
There are quite a few more features, but the general idea is this - it is not only about the data, but how your validations interact with your feature.
"The annoying part of forms validation is wiring up the actual input and form event handlers without loads of boilerplate, and mapping -- changing an known-good model to/from something the webbrowser elements understand."
So no, Vest is not strictly a form validations library, but working with it on multiple features I did notice the ease of linking a form field to validation test (or tests), and when done correctly, you only need a couple of lines to make your validations work with your inputs and form fields.
UI and Validations are completely different concerns. I would stay away from anything that's tied directly into one UI framework or another.
Presentation is one thing, and validation stands on its own, and you really don't want to mix the two together. Your presentation layer should only be using the output of your validations, nothing more.
I wrote a framework named Vest (also mentioned in another comment), which takes this approach into practice and separates your UI from your validation logic. You might like it.
Here are two very different examples using react hooks:
stackblitz.com/edit/vest-react-sup...
stackblitz.com/edit/vest-react-reg...
Link to Vest:
github.com/ealush/vest
I've read it over twice now, but near as I can tell, it doesn't have anything to do with Forms. It's model-validation which 1) Yup does the same job more concisely, and 2) most devs (read: me) hate writing unit tests so much that the similar syntax is actually a minus :)
The annoying part of forms validation is wiring up the actual input and form event handlers without loads of boilerplate, and mapping -- changing an known-good model to/from something the webbrowser elements understand.
Vest seems more similar to Yup than anything else.
Hey, sorry for replying late.
I can see where you're coming from. Yup and other schema validation libraries are great, and there is nothing much you can do with Vest that you can't do with them. They may even do it more concisely.
That's not my argument for using Vest.
You are right, though. Vest is not a perse form validation library, but it is also not a strictly data-model validation library.
It is not a data model validation library since it does not validate the structure of your data. You do not provide a schema to be validated, but instead describe different tests for your data - and the difference between the two is quite large.
If I had to put describe Vest in a sentence I would say something like: "App logic data validations".
The reason for this distinction is simple: Vest does a little more than just validate your data. It also gives you the tools and structure to handle your validations in your feature itself.
An inherent part of every Vest test is the error message displayed to the user upon failure, and since you can write multiple tests for the same field, you can present different error messages per field.
Vest gives you the ability to only validate some fields, for example - only the field that the user currently interacts with.
There are quite a few more features, but the general idea is this - it is not only about the data, but how your validations interact with your feature.
So no, Vest is not strictly a form validations library, but working with it on multiple features I did notice the ease of linking a form field to validation test (or tests), and when done correctly, you only need a couple of lines to make your validations work with your inputs and form fields.
I encourage you to take a second look at this file (index.js)
stackblitz.com/edit/vest-vanilla-s...
That's really all it takes to make your form validations work with Vest, it's even easier when using a framework such as React or Vue.