Comments (7)
Hmm... validation was originally onChange, but this meant you would get validation errors while typing (particularly annoying for URLs, email address or other regex style validations), so changed to onBlur, but hadn't considered what would happen if the textfield was the last field.
I can see three possible solutions (without considering implementation details for the first two):
Allow the user to hit enter to trigger validation (not great for mobile, and lacks discoverability / poor UX), revert to onChange and add a delay to the validation until after the user stops typing, revert to onChange and live with the validation noise.
None is perfect, so I'm open to other suggestions.
from formsy-material-ui.
I don't like the hitting enter idea. Adding a delay might work with a throttled version of the function (maybe using http://underscorejs.org/#throttle). onChange would be the simplest. I've seen this behaviour on other websites and the noise kind of acts like hint text.
from formsy-material-ui.
I think it would be debounce rather than throttle, but I'm not keen on pulling in all of underscore just for one function, so would probably implement natively (or copy in the relevant code).
from formsy-material-ui.
A simple fix might be to default inputs to validate onChange (particularly for fields that are required but have no other validation), and set some sort of prop to validate onBlur if needed (for fields like email). I do appreciate the onBlur functionality, as I was duplicating FormsyText and adding it myself before the update.
Another more complex fix might be to implement a showErrorOn prop or something of the like that could be set to blur or change. This way the overall validation of the form will always be set on change, but the display of individual input errors can be manipulated.
Hoping I can get some time to contribute. My current workaround, FWIW:
_handleOnChange(e) { let thisInput = this.refs[ e.currentTarget.name ]; thisInput.setValue(e.currentTarget.value); }
from formsy-material-ui.
A prop to make the validation event configurable for either onChange or onBlur makes certain sense, that way whitelist type validations (such as isWords, isNumeric) can complain as soon as an illegal character is typed, but pattern-matching validations such as isUrl can be configured to only fire on onBlur.
However, the problem of an onBlur input in the last field not enabling a submit button remains.
For the second option, my understanding is that the validation is run on setValue, which validates both the input and the form as a whole, so not sure how you would separate the two validations to check the form onChange, but only check the field onBlur.
Also, there would be no validation message on the last field if invalid and updating onBlur...
from formsy-material-ui.
Not entirely related but this might help...
christianalfoni/formsy-react#180
from formsy-material-ui.
Thank, yes, I had seen that. I believe a choice of validation events is the best compromise (a validateOnChange
property perhaps?)
This is assuming that validating the last field onBlur, and having the submit button disabled depending on validation is mutually exclusive (unless I'm missing some other capability of Formsy).
I hope to have some time to revisit this in the next week or two. PRs always welcome in the meantime! :)
from formsy-material-ui.
Related Issues (20)
- Is there a component for file upload? HOT 1
- FormsySelect onChange getting bypassed HOT 3
- Support the incoming Material UI v1.0 HOT 10
- Text field underline color broken after 0.6.1 HOT 10
- FormsyText with type="number" bad behavior HOT 3
- FormsyAutoComplete does not use provided default value HOT 2
- FormsySelect required is not showing any error when submit the form HOT 9
- Remove FormsyAutoComplete component? HOT 1
- Warning: getDefaultProps
- FormsySelect does not change underline color when selected HOT 1
- Not working with React 16.1.1 HOT 1
- Support new Formsy
- Incorrect directory HOT 6
- Support formsy-react v1.1.2 HOT 4
- FormsyDate and FormsyTime don't handle value argument properly
- FormsyText cannot accept value 0
- Not compatible HOT 1
- not compatible with React 16.3.1 HOT 1
- Accept a list of validation errors?
- Is This Project Maintained? HOT 15
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 formsy-material-ui.