A thing to note about checkboxes is that they are only included in the form data, if they are checked! Which means the value will only ever be "on" or not defined at all in the form data. This means that if you were to conditionally render the checkbox there's no way to determine whether the value is missing because it was left unchecked or because it was not rendered, for example. To get around this, you can use a hidden field and render it together with the checkbox to determine whether the checkbox is present but unchecked, or not present at all. Welcome to the world of HTML forms!
OK. My trick ear just heard "Ragexing", and those big epiphany fireworks went off in my head. Maybe it's me but I think I do more Ragexing than regexing.
Fair question! First, you should *always* validate on the server. Users can send any request to a backend (i.e. using malicious http requests instead of using your frontend) so you need to only accept well-formatted form data. Client validation is an enhancement as shown with the reward early, punish late pattern. It's a nice-to-have, but we make it pretty simple to add
How about form with array in the object? I've found this part is quite hard. Creating schema for all these library is okey. But the performance is sometimes slow. I ended up create a component for each field if the data is using array for performance.
Curious what you mean by arrays! Simple form does support multiple inputs of the same name to map to an array. Say, when you have a variable number of contacts in a signup form simple-stack.dev/form/#handle-array-values If you could share an example repo, it may help
There are definitely more complex flows that need libraries like react-hook-form. I could see Zod being a great way to validate server-side, and react-hook-form adds advanced validation client-side. If anything, I wanted "reward early, punish late" to be the takeaway. Use which tool is best
This is unspecified but the common practice is for "array"-like values, you append empty brackets `[]` to the name of inputs-or numbered. For "object"-like, you can pass a named key, like `address[zip]`. You could even go so far to specify fields as 'array of objects', like `person[0][name]` where 0 is the index and name is the key. But keep in mind that this is not specified by any HTML standard, so it's just a convention and you will need to handle parsing of those keys on the server and transform them manually. Some server-side scripting languages may already support this, like PHP.
The things react sucks the most at in comparison to every other framework is forms and styling. Aka like the two most important things on the front end lol
@@ジョシュア川又 every single one. Many have single file components with scoped styling. Most have simple binding for forms or a special way of doing forms. React forces you to choose something like hook forms and some other bizarre method of styling like styled components back in the day. Now people just use tailwind to avoid it entirely The part that react actually brought to the table (jsx and the reactivity aspect) is better done by solid, qwik etc.
Can't blame you for stopping at the server validation piece. Client validation is an enhancement, but for shorter forms, it's a real nice-to-have. I don't think Zod's bundle size is an issue if you're committed to ReactJS already though
Great stuff Ben! Thank you for these kind of videos, you have a gift for making things look easy.
Found your channel from the awesome shorts, great to see some long form too!
Really amazing stuff, Ben. You're treading new territory in DX!
awesome ! so glad to see more of those formats. great job !
(Vim extension : nice ! 😃)
A thing to note about checkboxes is that they are only included in the form data, if they are checked! Which means the value will only ever be "on" or not defined at all in the form data.
This means that if you were to conditionally render the checkbox there's no way to determine whether the value is missing because it was left unchecked or because it was not rendered, for example.
To get around this, you can use a hidden field and render it together with the checkbox to determine whether the checkbox is present but unchecked, or not present at all. Welcome to the world of HTML forms!
TIL thanks! Best to use `formData.has()` for those fields probably. Just another quirk 🥴
What a great video I just found. Thank you very much and keep up the good work!
OK. My trick ear just heard "Ragexing", and those big epiphany fireworks went off in my head. Maybe it's me but I think I do more Ragexing than regexing.
Amazing, thanks for the next integration
Great tutorial thank you. Q. Why do you have to validate both Server and Client side?
Fair question! First, you should *always* validate on the server. Users can send any request to a backend (i.e. using malicious http requests instead of using your frontend) so you need to only accept well-formatted form data.
Client validation is an enhancement as shown with the reward early, punish late pattern. It's a nice-to-have, but we make it pretty simple to add
Thanks@@bholmesdev I'll watch it again a few times.😄
Awesome work Ben most underrated content creator
Lage raho
Awesome Ben
How about form with array in the object? I've found this part is quite hard. Creating schema for all these library is okey. But the performance is sometimes slow. I ended up create a component for each field if the data is using array for performance.
I am wondering the same, for simple cases it’s great but can it replace react hook form?
Curious what you mean by arrays! Simple form does support multiple inputs of the same name to map to an array. Say, when you have a variable number of contacts in a signup form simple-stack.dev/form/#handle-array-values
If you could share an example repo, it may help
There are definitely more complex flows that need libraries like react-hook-form. I could see Zod being a great way to validate server-side, and react-hook-form adds advanced validation client-side. If anything, I wanted "reward early, punish late" to be the takeaway. Use which tool is best
This is unspecified but the common practice is for "array"-like values, you append empty brackets `[]` to the name of inputs-or numbered. For "object"-like, you can pass a named key, like `address[zip]`. You could even go so far to specify fields as 'array of objects', like `person[0][name]` where 0 is the index and name is the key.
But keep in mind that this is not specified by any HTML standard, so it's just a convention and you will need to handle parsing of those keys on the server and transform them manually. Some server-side scripting languages may already support this, like PHP.
Is it necessary to use frameworks like React/Vue/Angular for interactive components in Astro?
Not at all! You can use a plain tag if you know what you want. I use React because Ik my audience has some knowledge there
Hi, How did u put the terminal on right side in vscode?
Right click the terminal when it's open -> panel position -> right
💚
👊
It’s was all very nice until the client side generate… what a mess it created
The things react sucks the most at in comparison to every other framework is forms and styling. Aka like the two most important things on the front end lol
Can you tell which does it better and best?
@@ジョシュア川又 every single one. Many have single file components with scoped styling. Most have simple binding for forms or a special way of doing forms. React forces you to choose something like hook forms and some other bizarre method of styling like styled components back in the day. Now people just use tailwind to avoid it entirely
The part that react actually brought to the table (jsx and the reactivity aspect) is better done by solid, qwik etc.
Zod should not be on frontend, no treeshaking etc, use native form validation
Although I get your point, that's just premature optimization, all that gets cache in some cdn
Agree...I might consider shipping valibot on the client tho
Can't blame you for stopping at the server validation piece. Client validation is an enhancement, but for shorter forms, it's a real nice-to-have. I don't think Zod's bundle size is an issue if you're committed to ReactJS already though