Comments (4)
Yeah disabling fields during submitting isn't probably a great idea in the end. I'll close this issue, thank you for the discussion and hopefully, I didn't waste your time! :D
from modular-forms.
When you click the submit button, the form is submitted. The validation is a part of it and if your fields are disabled, they probably can't be focused. Therefore, this is currently the expected behavior. Why do you disable the fields when the form is submitted? I have not seen this on any login form yet. I would disable the submit button so that the form cannot be submitted while it is being submitted.
from modular-forms.
The login form is just an example of what I meant and how I implemented it.
I simply disable the fields so the user can't edit them until he gets the response back. Now I'm wondering whether it is a good idea or not.
I think of one use case, let's say you have client validation that passes, so you take that form data and send it to the server. The server does some validation & business logic, and it sends back 4xx error with an error related to some fields. You render the error along the field, but the user had changed the field's value before the response was acquired. Now the error & value are out of sync.
However, as you've said, disabling the submit button is the core thing here. Maybe disabling fields is a bad UX pattern, but I'd probably find few forms where it made sense, so I'll leave the decision whether to "fix" this up to you, but I think it seems natural to try to focus the error field only after when the form stops submitting.
from modular-forms.
I took a quick look at react-hook-form and it seems that's exactly how it's implemented there. If you want to disable the fields during submission but not during validation, you can write the following: disabled={loginForm.submitting && !loginForm.validating}
.
However, I think that the fields should not be disabled. Normally a user does not change his input during submission because, for example, a loading animation is displayed, and if he does, he should be able to understand why an error message is displayed incorrectly due to his change.
from modular-forms.
Related Issues (20)
- define form without defualt values HOT 1
- Next App directory support HOT 2
- sveltekit support? HOT 1
- Qwik: Form not working when schema is declared inside component$ HOT 9
- Qwik: Latest qwik release breaks types HOT 14
- Enhance FieldStore to Return Multiple Errors per Field HOT 2
- Phone Number Input HOT 1
- Allow setting initial form values of a mounted component HOT 2
- Preact: What is the best method to pull values of fields in the form for using in computed() HOT 4
- [Question] Is it possible to have optional fields? HOT 7
- Import error in formAction for qwik HOT 1
- Checkbox works improperly when use modular forms with kobalte HOT 7
- [Question] Is it possible to have custom input without ref? HOT 5
- When useFormStore is in a seperate file, it fails HOT 1
- Select component with number types HOT 3
- Using modular form Fields inside solidjs Dynamic component HOT 1
- Qwik: Vite is trying to externalize packages used in formAction$ HOT 3
- `requestSubmit` is not a function on Safari < 16 HOT 3
- Does this library support React Native? HOT 1
- Internal issue: Cannot read properties of null (reading 'internal') HOT 4
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 modular-forms.