You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi!
I'm new to Qwik and Modular Forms, congrats for your project.
I've had a login page to my new project and as a Firefox user I have a problem when submitting the form.
Firefox autofills the fields and it seems Modular Forms (I guess) does not capture the inserted values.
To reproduce:
Be sure to not have a saved login in Firefox for the test webpage
Open the login page
Log-in (email and password with 8 characters)
Save the data with Firefox
Check the log in the dev console, you must see the typed data
Refresh the page
The email and password must be autofilled
Submit
Check the log in the dev console and nothing happened
Is there anything to fix this bevahiour? Thanks 🙏
(I've saved a video showing my problem if you need)
import{component$}from"@builder.io/qwik";import{routeLoader$}from"@builder.io/qwik-city";import{email,typeInitialValues,minLength,required,useForm,}from"@modular-forms/qwik";typeLoginForm={email: string;password: string;};exportconstuseFormLoader=routeLoader$<InitialValues<LoginForm>>(()=>({email: "",password: "",}));exportdefaultcomponent$(()=>{const[loginForm,{ Form, Field }]=useForm<LoginForm>({loader: useFormLoader(),});return(<Formclass="space-y-12 md:space-y-14 lg:space-y-16"onSubmit$={(values)=>console.log(values)}><divclass="space-y-8 md:space-y-10 lg:space-y-12"><Fieldname="email"validate={[required("Please enter your email."),email("The email address is badly formatted."),]}>{(field,props)=>(<input{...props}value={field.value}type="email"placeholder="example@email.com"class="text-black"required/>)}</Field><Fieldname="password"validate={[required("Please enter your password."),minLength(8,"You password must have 8 characters or more."),]}>{(field,props)=>(<input{...props}value={field.value}type="password"placeholder="********"class="text-black"required/>)}</Field></div><buttontype="submit">Submit</button></Form>);});
The text was updated successfully, but these errors were encountered:
Thank you for creating and preparing this issue. I will look into the problem next week.
Nice! 😄
I made some other tests and to be honest it's the worst because it's random.
After some refreshs, the log shows sometimes the email and the password (no empty strings like the issue) 😠 (you can remove the validators but I think you know ^^)
It's like Firefox fills the fields before the binding is activated (if modular-forms works with a system like binding useSignal or other qwik stuff)
Hi!
I'm new to Qwik and Modular Forms, congrats for your project.
I've had a login page to my new project and as a Firefox user I have a problem when submitting the form.
Firefox autofills the fields and it seems Modular Forms (I guess) does not capture the inserted values.
To reproduce:
I remove all the complexity of my real login page to only use this example : https://github.com/fabian-hiller/modular-forms/blob/main/playgrounds/qwik/src/routes/(default)/login/index.tsx (I just use an HTML input instead of your component)
Is there anything to fix this bevahiour? Thanks 🙏
(I've saved a video showing my problem if you need)
The text was updated successfully, but these errors were encountered: