Everything You Should Know About Working With Forms In SvelteKit

Learn how to use form actions, progressive enhancement and how to do validation in SvelteKit.

👉️ Support

▶️ YouTube Membership

🔴 Patreon

👉️ Links:

Working With Forms In SvelteKit

👉️ Uses:

👉️ Socials:

🔖 Timestamps

0:00 Intro
0:07 Project Setup
0:56 Creating A Fake Database
4:09 Reintroduction To Forms
8:07 Working With Forms Using API Endpoints
25:34 Working With Forms The SvelteKit Way Using Form Actions
35:13 Progressive Form Enhancement
39:26 Customize The Enhance Action To Show A Loading UI
45:51 Form Validation In SvelteKit
57:09 Advanced Enhance Action Customization
1:02:22 Outro

#sveltekit #joyofcode

[jeffylikespugs]

Please don't stop making this content! It's extremely invaluable and you're a great teacher.

[coltonaallen]

I hope Rich Harris knows how helpful you are to the community! You deserve the recognition.

[einarpersson]

I hope you will continue, SvelteKit is both simple and complex at the same time. You are doing the ecosystem a great service explaining in depth what is going on.

Suggestions:
- understanding hooks. Server/client. When, why?
- understanding locals and when you might use it.
- server side stores. Valid use cases or something to just avoid?
- …

[fazex]

Thank you so much, I love this format and the way you show the inefficient way first and then refactor to the Svelte way.

[thedelanyo]

First of all your videos are progressive. You start from the beginning to advance with clearly understandable pattern. That's awesome.

Secondly, this is a Sveltekit case, am sure it'll be really awesome when (if) it'll be possible to generate typing for the form: ActionData just like data: PagaData is typed.

[cybermanaudiobooks]

Great tip at 44:00!!

A tutorial showing how to setup a working basic blog with Sveltekit integrated with Github and Markdown would be great (and very useful)!

Also thanks for all your work and time, championing picocss and loads of other helpful tips!

[offchan]

I really like the way you are teaching by trying to demystify what's going on under the hood, especially going through the original codebase of SvelteKit itself. That's really useful because it's important to have a mental model of how things work so that you can debug things when bugs happen. Use:enhance is a "leaky abstraction". It requires understanding the low-level details otherwise reasoning about it becomes difficult.

[JoshCano]

You know the video is getting good when he drops the "ah, interesting"

[vrx_ui]

absolute beginner channel for svelte!!! love what you are doing man!!! <3 ty
this video is easy to understand!

[bmehder]

How awesome is this video? Better than a bunch of bananas. You are the enhanced SvelteKit docs.

[nyashachiroro]

Thank you so much for teaching me Sveltekit... This has been a blessing.

[skelaw]

Amazing job! I was struggling to understand this new concept, but you explained it so easy.

[adammalec]

Dude, thanks so much for the content. You my svelte hero!

[PureFunc]

Great content! How would you go about setting initial values for inputs though? For example grab a user's name from the load function and then show an input to edit a user's name but have it first populated with 'data.name' and then when you reset the form go back to the initial 'data.name' again?

[pickavana]

@41:02 you said you can name the use:enhance={ functionname } functionname anything you like but then you named it the same as the form action. Fair enough. So Sveltekit will run the use:enhance={ functionname } FIRST, whatever that name is, and SECOND (unless you cancel) it will run the form action and THIRD, the result of that form action can be accessed in the callback function of {functionname} ? Is that how it goes?

[rossvold]

@JoyofCodeDev 1:02:55 This i feel isn't very well documented in the svelte docs, was looking for a way to redirect to a page before i executed the named action.
Thanks alot <3

[pickavana]

@ 1:00:16 you said "this is awesome because you can reuse 'this' anywhere. "this" refers to form actions, right? Because you copied login/+page.svelte to home route, added action="/login" and use:enhance={login} to form line and created login function using "result" and applyAction(result). I see that. So this allows us to reuse the form actions (declared in login/+page.server.ts) in another route/page. ok i can see that (now, having been through this twice) BUT I am not sure that I can see a use case for this?
@ 57:07 "Form validation requires its own video" ... has one dropped or is one on the way?

[Jackshuff]

Your content is great! I'd love to see a video on user registration, login, and a magic link!

[pickavana]

I have a question. When the FAIL returns the form & errors back to +page.svelte so you can set the value to {form?.data.user ?? ''} and display the validation message using {#if form?.errors?.user}, since this information is clearly available in +page.svelte, can I simple set const errors = form?errors in the script section and use that information other that as shown, within the <form> </form> tags or is the returned data ONLY useable within the form tags?
(I am trying to create a "generic" form where I am calling a field component for each field in the form, so I want to pass the form value and error to the field component. )

[jonathoneng]

This is great! I’ve been learning a lot about svelte stuff just from watching your videos. I do have to ask though, do you know any ways of implementing an automatic mailer within svelte? I know of nodemailer and sendgrid but I can’t get them to work in svelte