Comments (3)
Thanks for checking it out, I appreciate your thoughts. You're totally right, however I intentionally ignored the rabbit hole of more intricate (read: correct) form validation as there too many things to consider and this was really meant as a proof of concept.
It would be fairly trivial to implement a isDirty
flag on each field, which I think would be the ideal route since initialModel[field] === model[field]
is not necessarily correct (initialize w/ empty password, they type something in, delete it; fields are now the same, but invalid).
I'd be open to considering improvements in this regard, though the purpose of this library is almost exclusively to supply the model + getter/setters for it from a higher order component. The rest of the functionality is demo'd to show it's possible, but expected to be more thoroughly implemented in userland.
from react-reformed.
The way I've implemented this for myself (using reformed as base) is to create a validationFeedback
middleware. This creates a higher-order component that provides two props: getErrorClass
and showValidationFeedback
. getErrorClass
is what I use to display an error indication on my form fields and returns a CSS class name to be fed into classnames
. The trick is that it never returns a CSS class until showValidationFeedback
has been called at least once. I call showValidationFeedback
when the user clicks the submit button (which is always enabled for these forms) and I also use this function to display textual error messages in a ticker and to move focus to the first field with an error.
Of course this approach already makes some assumptions about what your actual form implementation looks like, so your mileage may vary, but hopefully this gives you some ideas.
from react-reformed.
Thanks for the suggestion @arendjr, that sounds like a pretty sane approach.
I'm going to close this issue just to tidy up the project some, since it's more of a discussion than anything. I'll direct people to your suggestion if this comes up again :).
from react-reformed.
Related Issues (12)
- UMD release HOT 3
- Deprecation warning about PropTypes HOT 3
- Question regarding Complex validation based on state of the model
- I implemented a reformed component in Typescript. HOT 1
- Question regarding this vs. redux-form HOT 5
- How to implement "middleware"? HOT 3
- How about just intercepting setModel? HOT 5
- Question regarding patterns with autofill and server rendering HOT 6
- How to implement isSubmiting HOT 2
- Suggestion to support updating nested properties HOT 1
- Forms without initial model cause React warning message HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-reformed.