Forms Will Never Be the Same

Подписаться 24 тыс.

Просмотров 52 тыс.

50% 1

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

Опубликовано:

19 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 134

@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?

@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!

@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

@rafalpotasz 9 месяцев назад

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.

@hassanmiiro1030 Год назад

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

@sunstryder 9 месяцев назад

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

@eddiemcconkie4111 Год назад

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

@Huntabyte Год назад

You’re welcome!

@semicognitive Год назад

Love the production quality of these 👏

@naranyala_dev Год назад

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

@meaningmean Год назад

Looks fantastic, thanks for bringing it up.

@ofeenee Год назад

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

@Huntabyte Год назад

You're very welcome!

@adriansanmartin1313 Год назад

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

@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.

@vizunaldth 6 месяцев назад

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

@Huntabyte 6 месяцев назад

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!

@tjeerdbakker160 Год назад

Looks awesome!

@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!

@stumbleio Месяц назад

Excellent guide!

@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!

@vitchrubasik9621 Год назад

Wow, this scratches so many itches I had

@nanashi7726 Год назад

Nice work 🎉

@DomskiPlays Год назад

Wow this is really awesome!

@Huntabyte Год назад

I agree!

@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!

@johnddonnet5151 Год назад

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

@the_wrong_folder 10 месяцев назад

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!

@ABsazerNer Год назад

wonderful

@halftome 11 месяцев назад

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

@VanDameDev 11 месяцев назад

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

@nushankodikara Год назад

This is awesome

@Huntabyte Год назад

I agree!

@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.

@kaibe5241 11 месяцев назад

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)

@lucasmarcolino1117 Год назад

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

@AzinAzadi-mv6vj 17 дней назад

This makes it "Super" easy!

@obipolare Год назад

I really love zod and superforms! thanks for the video

@Huntabyte Год назад

You're welcome

@toddribnek6660 Год назад

Good stuff, earned a sub from me.

@Huntabyte Год назад

Thank you!

@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!

@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!

@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

@resoftw 11 месяцев назад

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

@knoraziel 10 месяцев назад

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

@RyuuuGamingUnlimited 10 месяцев назад

Yes please! Not tailwind dependent ui library 🙏

@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

@SandwichMitGurke Год назад

This is basically like Flutter FormBuilder

@thienhuynh7962 Год назад

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

@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

@adhdadventure 9 месяцев назад

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 9 месяцев назад

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

@mikasi2005 10 месяцев назад

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

@andreas.soderlund 9 месяцев назад

It's Error Lens

@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.

@ObviouslyProgrammer 10 месяцев назад

Nice

@Marcel-ph3us Год назад

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

@Huntabyte Год назад

I don't see why you couldn't!

@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.

@user-jl1lv5jm5x Год назад

could you show how to add flash messages ?

@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.

@mintez1196 10 месяцев назад

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

@andreas.soderlund 10 месяцев назад

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

@ericksantos12 9 месяцев назад

what extension are u using for real time logs?

@Huntabyte 8 месяцев назад

ErrorLens

@ericksantos12 8 месяцев назад

tysm@@Huntabyte

@R_Y_Z_E_N 11 месяцев назад

Cant we use normal html pattern attribute

@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

@MisstVlog 3 месяца назад

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.

@cubcrafts 3 месяца назад

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!

@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.

@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!

@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.

@Heynmffc Год назад

Sniping someone off a generic profile picture is CRAZY

@Huntabyte Год назад

Power of branding @JoyOfCodeDev

@ThomazMartinez 9 месяцев назад

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

@Huntabyte 9 месяцев назад

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.

@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

@jonathangamble 10 месяцев назад

Now wish it just used valibot!

@andreas.soderlund 9 месяцев назад

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 9 месяцев назад

@@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 9 месяцев назад

@@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 9 месяцев назад

@@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 9 месяцев назад

@@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 8 месяцев назад

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...