Forms Will Never Be the Same

SvelteKit Superforms will have you questioning every other way you handled forms with SvelteKit.
If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
In this video, I give a crash-course introduction to SvelteKit SuperForms. A powerful library for SvelteKit.
💥SvelteKit Super Forms: github.com/ciscoheat/svelteki...
📁 Final Source Code: github.com/huntabyte/superfor...
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
Chapters:
📃 Topics Covered:
- SvelteKit Super Forms
- SvelteKit Forms
- SvelteKit Input Validation
- SvelteKit Form Validation
- SvelteKit Form Actions
- SvelteKit Form Libraries
- SvelteKit Zod Form
- SvelteKit Form Package
- SvelteKit Validation
- SvelteKit Auto-Validation

[@andreas.soderlund]

One thing that will be better explained in the upcoming website, is that the call to superValidate in the load function can take any object partially matching the schema, so it's made for fetching data from a DB based upon route parameters, and send it directly to the form.

[@Huntabyte]

I was actually curious about this, specifically for forms that will have prepopulated data! That's great to hear.

[@andreas.soderlund]

@@Huntabyte The CRUD example in the repository wiki uses this to create a CRUD backend in about 150 lines of code.

[@amorfati8277]

Very cool library Andreas ❤

[@andreas.soderlund]

@@amorfati8277 Thank you, glad to see the positive response. :)

[@pickavana8056]

Does your library work only with Zod or can it work with other home-grown schemas and if so what are the requirements for the schema?

[@rafalpotasz]

I've been learning how forms, form actions and api's work over the last few days, prior to doing your course (can't wait to start it). This has blown my mind now that I understand how much stuff is under the hood. It's pretty insane how short this code is now. Belated thanks for this explanation.

[@SvelteSociety]

Great video, and what an awesome library it is! Not sure if you did this to make the code easier to read but I think you should always keep the constraints on the fields since they make your forms work without JS. Handling error messages should, as much as possible, be handled using the css: `input:invalid { ... }` etc. IMO :)

[@Huntabyte]

Thank you! And yes, I removed them just to make it more obvious how the alternative validators work🫡.

[@AlanDanielx]

So it means that ir we use this, we wont be able to run it if JS is disabled?

[@esquilo_atomico]

@@AlanDanielx I think that the validation will kkeep working, but only on the backend... so your user will have the feedback on erros a little later

[@luminox1]

That ciscoheat guy deserve an award lol

[@Huntabyte]

He really does… ciscoheat ’s unite!

[@smart0758]

Coming after the Svelte Hack, the Ciscohaat guy got the award he deserved!

[@hassanmiiro1030]

Been following it religiously...and I like how it has become! Thanks for the video to make more clearer!

[@eddiemcconkie4111]

This looks awesome! I just heard about this library earlier this week, thanks for covering it!

[@Huntabyte]

You’re welcome!

[@sunstryder]

Thank you and thank you ciscoheat… I’ve been procrastinating implementing this myself. I even changed to server routes from form actions this week because of all the extra things you mentioned in Sveltekit form real world use. With superform I’m excited to try use form actions again

[@naranyala_dev]

Thank you for making this video, it is very interesting to be able to use it in more advanced cases

[@vizunaldth]

Looks a lot like react hook form, great that someone made the effort to bring a similar experience to my favorite tool

[@Huntabyte]

I'm thrilled someone brought something similar to SvelteKit! Having a solid forms library allows you to move so much faster and make less mistakes along the way!

[@semicognitive]

Love the production quality of these 👏

[@ofeenee]

Well put video, with excellent pace; clear and concise! Thank you for sharing this interesting library. 🙏

[@Huntabyte]

You're very welcome!

[@meaningmean]

Looks fantastic, thanks for bringing it up.

[@adriansanmartin1313]

ho ... amigo muchas gracias por los aportes y tu tiempo .. estas cosas que compartís me ayudan mucho. te mando un besito grande

[@amorfati8277]

Great Video as Always ❤. I think you did not highlight enough its best feature which is to set the data type to json. This allows you to submit any json object as form data to the server which allows to send nested object values or array values. Also you don't have to type coerce from string to other types. Also from v6.0 you can easily handle multiple forms in the same page easily. Its pretty cool

[@Huntabyte]

I did mention it but there is a lot I didn’t cover as the library is capable of so much! Just wanted to provide a little introduction!

[@fer.barrios]

Love your svelte vids, thanks for the upload!

[@Huntabyte]

You're very welcome, and thank you!

[@asatorftw]

Damn this is next level. Thank you for the creator and thank you for introducing it to us! Gonna use it asap.

[@vitchrubasik9621]

Wow, this scratches so many itches I had

[@tjeerdbakker160]

Looks awesome!

[@KevinMacKenzie61]

Thanks for another great video and thank you Andreas!

[@andreas.soderlund]

Glad you like it, and glad to contribute to the Svelte+Kit ecosystem!

[@stumbleio]

Excellent guide!

[@nanashi7726]

Nice work 🎉

[@DomskiPlays]

Wow this is really awesome!

[@Huntabyte]

I agree!

[@johnddonnet5151]

It's like react hook forms only for svelte, I love it

[@justgravitate]

Pretty cool definitely simpler than the native svelte way to handle forms!

[@Huntabyte]

It really is! They do the hard work behind the scenes!

[@the_wrong_folder]

Enjoying your svelte videos! I'm looking for a tutorial on how to display form fields conditionally, based on the option selected in another field in a svelte-kit project. Any nice blog posts on this? thanks.

[@oskrm]

6:48 This is a security feature of the browser (to not show the message) because of the abuse from scammy sites.

[@Huntabyte]

That makes complete sense! Thanks for clearing that up!

[@AzinAzadi-mv6vj]

This makes it "Super" easy!

[@ABsazerNer]

wonderful

[@obipolare]

I really love zod and superforms! thanks for the video

[@Huntabyte]

You're welcome

[@halftome]

This looks neat! I’ve always been using felte for my forms and validation, I wanna see how this stacks up against it

[@VanDameDev]

I think felte makes more sense, especially when you're not always using SvelteKit.

[@nushankodikara]

This is awesome

[@Huntabyte]

I agree!

[@Gilgameshx]

Sweet! Thanks man for bring us this awesome explanations By the way can you make a video of how to deploy svelte kit app with api into azure cloud please 🙏 I would appreciate it

[@knoraziel]

Now the only thing sveltekit is missing is a decent ui library without Tailwind 😅

[@RyuuuGamingUnlimited]

Yes please! Not tailwind dependent ui library 🙏

[@tom400iq6ft]

This library is goated

[@Huntabyte]

Facts. Just deleted 25 helper/util functions I normally use to cover 1/25th of what this lib does out of the box.

[@andreas.soderlund]

Thank you for that, it took a couple of decades of struggling with forms to finally arrive at something that just clicked. 😄Of course, standing on the shoulders of Svelte+Kit is a big part of it, couldn't have done it without them.

[@SandwichMitGurke]

This is basically like Flutter FormBuilder

[@toddribnek6660]

Good stuff, earned a sub from me.

[@Huntabyte]

Thank you!

[@zikado4994]

Hello, great video, the library looks really great. Only thing, I would like to ask if you can also validate input on focus leave like in react libraries like react-hook-forms etc., thank you for the asnwer.

[@andreas.soderlund]

That's underway in the next update, just have to figure out the best way to configure that feature!

[@lucasmarcolino1117]

Is there a way to simulate client side validation without submit form?

[@duarteribeiro1520]

Hello, I'm new to SvelteKit, what is "./$types" when you're importing PageData or ActionData? Nevermind, I found what it is. It's a file that's dynamically generated with the relevant types for the page. The error I was getting related to this question is because I needed PageData but I was in a +layout file, so I had to import LayoutData instead

[@SoreBrain]

Thanks for adding this info

[@kaibe5241]

How do you do required error messages, and how do you customise error messages when providing a zod validation object? Both of these I'm really struggling to find any documentation for... (I can't stand the in-browser messages)

[@ObviouslyProgrammer]

Nice

[@grizzzley4624]

Would be awesome if you could remake this video, but using the shadcn-svelte form elements! If you do, can you please include uploading files for user images!

[@resoftw]

great video, but can you show us how to validate file upload, like image?

[@SenaKobayakawa-xl2es]

Thank you for this! I've been meaning to ask (and this might be a newbie question): how did you manage to run pnpm with Typescript? I tried using pnpm with Angular+Typescript and now SvelteKit+Typescript, my IDE (VS Code) tells me it can't find the type declarations :(

[@Huntabyte]

I've had it setup for a while now, but honestly I don't remember having to do anything special beyond installing typescript!

[@guilli83]

Very interesting library!. Is it possible to use it to handle complex forms like conditional fields or array fields?

[@andreas.soderlund]

Yes, it has full support for nested data and array fields, either as object/json data, or by using the html standard of adding multiple form fields with the same name. I'm not sure what you mean with conditional fields, switching fields depending on some condition?

[@guilli83]

@@andreas.soderlund Hi!, you are right, I did'nt clarify my question. I was thinking about the possibility to add and remove fiields or a group of fields dynamically, like adding or removing elements in a list, similar to the feature useFieldArray from react-hook-form

[@andreas.soderlund]

@@guilli83 that's no problem, just make a field in the schema take an array of objects. Then with dataType = 'json' set, you can use any nested data structure.

[@luczztem]

when I submit with an error using enhance, when I hit submit again the store doesn't get updated anymore, also the error messages show for all inputs and don't disappear... idk how this can be

[@user-jl1lv5jm5x]

could you show how to add flash messages ?

[@mikasi2005]

What is the VS code extension used in this video which automatically import modules and validates/suggests the code as you type?

[@andreas.soderlund]

It's Error Lens

[@thienhuynh7962]

I'm getting 'form' does not exist on type '{ session: Session | null; }'. How can I fix this?

[@arianitonline8748]

does it work with js? I am leaning towards js now more than ts, and sveltekit with tslint gives me what I need for writing js code, and since I am not working with a big team for my personal projects, there is no need for ts

[@andreas.soderlund]

It should definitely work with js, if it doesn't, raise an issue at the repo and I'll make sure it does.

[@Marcel-ph3us]

Can I submit and validate an array of checkbox inputs with it?

[@Huntabyte]

I don't see why you couldn't!

[@arpandutta3591]

Is there a starter form that shows all of this in a example that can then be used?

[@andreas.soderlund]

In the repository wiki, there is a page "Designing a CRUD interface" which is a more in-depth tutorial, and it has a link to a Stackblitz repo where you can explore straight away.

[@adhdadventure]

Oooh sweet stuff. But i have a question. How does it work if I in form want to populate it with data that i have about the user from the backend? So lets say i am building a update user page. And want to load the data from the database and at the same time use the awesome superform for validation. Now its binding to $form.firstname for example. But if that data from the backend has a a value, how can i show that and also validate at the same time?

[@andreas.soderlund]

You can pass any data partially conforming to the schema to superValidate in the load function, and the form will be populated with that.

[@mintez1196]

Hello, what If i want to have realtime validation? Is it possible to do?

[@andreas.soderlund]

No problem, check out the client-side validation part of the docs.

[@R_Y_Z_E_N]

Cant we use normal html pattern attribute

[@onz9950]

Meanwhile youtube subtitles: "In this video we're going to take a look at _spell kid_ super forms" ... yes I'm fine with it.

[@Huntabyte]

I need to start updating them manually!

[@MisstVlog]

How can i send array of object in formdata?

[@andreas.soderlund]

Check the website docs about nested data. It's just a simple option, then you can use any nested data structure.

[@stathiskapnidis9389]

I'm Trying to create a component called EmailForm and add this to different pages in different routes. How do I do that? I'm having issues with the export let data line

[@Huntabyte]

Hey Stathis, the superforms docs has an entire page dedicated to this! (superforms.vercel.app/components)

[@stathiskapnidis9389]

@@Huntabyte oh that's perfect. Thanks a lot Hunt. Appreciate it

[@ericksantos12]

what extension are u using for real time logs?

[@Huntabyte]

ErrorLens

[@ericksantos12]

tysm@@Huntabyte

[@arunkumarTdr]

Please Post a video on how to deploy svelte kit with `adaptoe-node` to an aws lightsail / ec2 server and with the shared hosting service that supports node.

[@scotchbarrel3371]

You prefer this to Felte?

[@Huntabyte]

Isn’t Felte strictly a client-side lib? I.e. no true integration with Kit or has has something changed?

[@kklowd]

This seems like a lot of code for a single form. I don't use svelte so I'm wondering if this is intentional. Svelte is supposed to be as basic as possible without too much magic and overhead. Cool stuff for forms but not sure how I feel about the effort compared to other frameworks

[@Huntabyte]

I think the difference is we're doing progressive enhancement here, so these are your standard HTML forms enhanced with JS. You could of course abstract the input into a separate component and just pass in the props to cleanup the pages if you wanted.

[@Heynmffc]

Sniping someone off a generic profile picture is CRAZY

[@Huntabyte]

Power of branding @JoyOfCodeDev

[@chinmayk8004]

This is very cool. Annoying thing tho: Please use an each block to iteratively create your form? It was a pain watching the attributes getting added for each input sequentially

[@ThomazMartinez]

Never will understand why do form validation on server when client can do

[@Huntabyte]

Because the user owns the client, you own the server. The user can manipulate the client itself, or make the POST request to your server from another client. Server-side validation is the bare minimum.

[@jonathangamble]

Now wish it just used valibot!

[@andreas.soderlund]

Valibot, like most other validation libraries, doesn't allow schema reflection (at least nowhere near Zod's level), so there is no way to use the schema to generate important metadata, hence the limited support for other libraries, and there is not much interest to improve things. It seems like focus is more on shaving off microseconds, which is also quite irrelevant for form validation.

[@jonathangamble]

@@andreas.soderlund - Curious what you mean by generate metadata. I also find Zod slow. 50kb vs 5kb is a big difference for a mobile user. However, I personally only use either on server and js built in validation on browser.

[@andreas.soderlund]

​@@jonathangamble Metadata: Default values for the schema. Browser constraints mapped from the schema. Information of each field's type, if it's nullable, optional, hash for fields to determine uniqueness, etc. How do you mean Zod is slow? Did you have any performance issues in form actions during the actual validation? About the size, if you're not using the schema for client-side validation, Zod won't be added to the client, it only runs on the server.

[@jonathangamble]

@@andreas.soderlund Zod is very slow on the frontend, but you're right I don't use either on the frontend as I think you should be using built-in html5 anyway. Valibot does have constraints, nullable, optional, default, and hacks for unique arrays just like zod. It is just not as mature as zod for sure. What you're arguing is maturity in reality, which is true. However, all the examples you mentioned are available in valibot.

[@andreas.soderlund]

​@@jonathangamble Then you are misunderstanding, it's not about defining the schema but *reflecting* on it, as I said. At runtime, you need to be able to extract the mentioned metadata from the schema, otherwise you are locked into a library-specific DSL with no way of using it other than the simplest form of validation, which is not enough for form libraries, unless you want to put a very large burden on the consumer.

[@pickavana8056]

"Everybodys using Zod "? How about using your own schema?

[@Huntabyte]

Zod adequately covers 99% of use-cases. Any specific reason to build your own from scratch? I’m sure it would be possible to extend superforms to support this but would the juice be worth the squeeze for the maintainers? Not sure.

[@amanuelelhanan4716]

Your video is a bit fast and somehow am struggling to follow up, and is somehow not for beginners I guess

[@lordlogan3308]

too complicated

[@Huntabyte]

I find the opposite to be true when dealing with complex apps.

[@epicstudio3919]

I don't know, but have been getting this error while trying it: "No known conditions for "./server" specifier in "sveltekit-superforms"

[@epicstudio3919]

Ohh, I got I have to restart the server. Lol.

[@luczztem]

thank you so much bro I was having the same problem... lol I used google and ChatGPT but to find no solution. thank God I decided to check the comments to see if someone got the same problem xD

[@devbellomondo]

Dear Svelte (eco)contributors, please, please take a vacation, I'm tired of maniacally refactoring my already beautiful and awesome backends! ❤‍🩹 Just kidding, but seriously, I have to control my grin more and more when watching things like this in public places...