Comments (5)
Funny, if i use the form.response.message
, instead of the scoped field.error
to get display the error 'An account with this username already exists.
, it works... even when i change the value multiple times, and the username exists.
so here is my work around
throw new FormError<Form>('An account with this username already exists.',);
// remove this
// {
// name: 'An account with this username already exists.'
// }
Then have the jsx look like this
<Field name="name">
{(field, props) => (
<>
<label class='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'>Username</label>
<input {...props} placeholder="ryan" type="name" value={field.value} class='focus:ring-[0.1875rem] focus:ring-accent flex h-9 w-full rounded-md bg-[#E8F0FE] text-black px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-black/20 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50' />
{field.error && (<p class='text-[0.8rem] font-medium text-red-500' >{field.error}</p>)}
{form.response.message && (<p class='text-[0.8rem] font-medium text-red-500' >{form.response.message}</p>)}
<p class='text-[0.8rem] text-muted-foreground'>This is your public display name. It can be your real name or a pseudonym.</p>
</>
)}
</Field>
from modular-forms.
Here is my two cents, i think it has to do with how you guys handle the field errors. It looks like disrupting the field state after:
- throwing an error on submission,
- throw another error if the form validation does not work
- then try to throw another error when on user submission will return a blank field error.
Thanks for your great work, Fabian. :)
from modular-forms.
Looks like a signal bug or problem in Qwik or do you thing it is related to our source code?
from modular-forms.
I am not using any Qwik useSignal
code anywhere (from my snippet) so it most likely is stemming from somewhere in your source code.
How do you handle errors on submission per field?
from modular-forms.
In encountering myself some wired signal behavior in Qwik. I hope this gets better with v2. I am in exchange with the Qwik team. If you provide me with a minimal reproduction on StackBlitz I can try to investigate the problem. Here is a template: https://stackblitz.com/edit/modular-forms-qwik?file=src/routes/login/index.tsx
from modular-forms.
Related Issues (20)
- SolidJS: Form reset action doesn't preventDefault like submit does. HOT 1
- [Qwik] Form state is reset after action returns an error HOT 1
- [React]: Preact Signals Dependency Update HOT 11
- [SolidJS]: How to handle errors from server? HOT 3
- [Valibot/i18n] Client side validation is not translated HOT 2
- [Bug] Todo - Move First to End - Warning: Cannot update a component (`ForwardRef`) while rendering a different component (`Field`) HOT 3
- [Feature] Ability to configure different validations to run at different times HOT 1
- valiForm doesn't execute custom validation properly HOT 4
- hello facing types errors HOT 1
- Form submitted when filed has error HOT 2
- [Question] How to implement a controlled component contains multiple fields? HOT 3
- formAction$ code is not executed if Form component has "class" attribute HOT 8
- [Question] Render props pattern HOT 2
- Form action triggers drizzle polyfill issues. HOT 2
- Make the second parameter of the `formAction$` optional HOT 6
- loginForm.submitting not reactive
- Prevent Double Submit HOT 8
- Form action response is optional before form submit HOT 1
- Can I use modular-forms with action from "@solidjs/router"? HOT 3
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.