Form Validation Strategies for JavaScript Apps
Vložit
- čas přidán 18. 01. 2024
- 📗 Book (Updated Aug 2023): lachlanmiller.gumroad.com/l/v...
🎉 Writing a book about tooling, testing and development philosophy: lachlan-miller.ck.page/92dfa0...
🐦 Twitter: / lachlan19900
Some different approaches to validating forms I've seen over the years with my thoughts. - Věda a technologie
Nice overview, as always!
I'm doing a refactor of a legacy Rails app form to Vue and we have a mix of "Server config driven" + "Reward Early". We didn't want to discard the existing base field "rules schema" coming from the backend but, at the same time, we want to improve UX as the form is very complex/big/stepped.
From my experience, the major problem with the "Server config driven" was dynamic/conditional field validation: a "field B" is required only if "field A" has a certain value.
This led to duplication on the front end as we didn't find any good solution to share those rules and is indeed a source of bugs/inconsistencies.
In some cases where the validation logic was so complex, we drop the client-side validation of that field and render the error only after validating on the server, so it is more of a hybrid approach!
Thanks for another insightful video! Keep it up!
I hadn't thought of the related field validation - eg only require field A when field B is checked, or something.
Thanks for the comment, very insightful. Why are forms still so tedious in 2024 🤯
Thank you for such a detailed answer. This is an excellent overview of the different approaches to a validation system.
In fact, in my projects there is usually no validation on both the server and client side. I'm using server side validation. After submitting the form, the server produces validation results, and the frontend part displays the corresponding errors next to the fields.
But I was surprised that in the book you only consider client-side validation. In reality, I have not encountered applications where it would be acceptable to store incorrect data in the database. This is where the question arose.
I would like to note that the approach to the validation request after blur-action interested me. However, I see 3 problems here.
1. If the form is validated before all the fields are filled in (there are optional fields), then the form will be sent without a number of data that the user might have entered later. This problem will need to be solved somehow. There are options, however.
2. If the web application has a lot of users and they actively use forms, then with this approach the number of requests to the server will increase many times over. And, probably, it will be necessary to ensure that the server supports such a number of requests.
3. It will be necessary to store data about which fields the user has already tried to fill in and which ones he has not. This is necessary to avoid displaying errors in empty fields.
But overall, I really like the direction. Thanks again for reviewing the various solutions.
------------------------
Igor Telmenko
Great reply - thanks for that. It's weird but there are some applications where you don't need much server side validation (eg: in the system I worked on, if you say a patient is 1000kg, sure thing! Maybe some academics are doing research for obese patients, we don't know).
I think the example in the book is still good, not just for validation, but also for the concept of separating UI and business logic for easy testing.
Thanks for the comment, let's chat again soon 🔥
Sure. Book + this video = excellent source of information about architect patterns for Vue
A Lachlan video!? Today is a good day. I’m currently building an app that’s primarily form driven so this was right on time.
I heard you mention you’re building something for a client. Are you no longer get at Cypress?
Hey Cody! Let me know how you go with your forms project... curious how you end up implementing it!
I hope I can make more content - spent a bunch of time on overly ambitious videos, decided to go for some quick wins and make some simple videos about what I'm up to.
Yeah, I am not working at Cypress now - doing some freelance and figuring out what's next 😎
can you provide the whimsical pdf/ high quality png/ or read only link ?
Here: whimsical.com/visual-regressions-5hy2wkoesFMcAeTLzB7nn2
Thankyou