Form Actions Made Simple

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

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

50% 1

If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
SvelteKit is a framework for building modern, high-performance, browser-based applications. It was developed by the team behind the popular Svelte framework and is powered by Svelte. Unlike other JavaScript frameworks, it doesn't use a virtual DOM or deliver a bloated and slow application.
In this SvelteKit tutorial, I demonstrate how to use Form Actions within SvelteKit, which enables you to use forms both with and without Javascript within your SvelteKit application. We cover progressive enhancement, form validation, and redirects all within this single video.
📂 Final Code
github.com/huntabyte/svelteki...
💽 Loading Data in SvelteKit
• Loading Data in Svelte...
⏪ Previous Video (Route Params in SvelteKit)
• Dynamic Routes & Slugs...
📚 Resources Mentioned In This Video
- SvelteKit Docs: kit.svelte.dev
- DaisyUI: daisyui.com/
- TailwindCSS: tailwindcss.com/
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
🔖 Chapters:
00:00 - What We're Building
00:37 - Starting Code Overview
02:00 - Exploring the Default Action
07:20 - Form Validation
11:40 - Implementing Named Actions
16:00 - Exploring Progressive Enhancement
18:15 - Implementing use:enhance
23:30 - Validation Alerts
24:30 - Customizing use:enhance
26:55 - Redirects
28:00 - Conclusion
📃 Topics Covered:
- Form Actions in SvelteKit
- How to use form actions in SvelteKit
- Actions in SvelteKit
- SvelteKit vs Remix
- SvelteKit vs NextJs
- +page.server in SvelteKit
- SvelteKit crash course
- What is SvelteKit?
__________________________________________
(Affiliate links may be included in this description. If you choose to purchase a product from one of those links, I may receive a small commission at no cost to you. Thank you for supporting the channel!)

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

1 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@arianitonline8748 Год назад

for those who are watching this video after sveltekit version 1.0.00, in the validation chapter, use fail instead of invalid

@gtanmoy Год назад

One of the best video on Sveltekit in RU-vid! Please make a full project with latest Sveltekit with capacitor

@paivagabriel Год назад

I was struggling a lot with form submissions. This video was all I needed. Excellent content! Thanks!

@Huntabyte Год назад

You're very welcome! Glad it helped!

@MrRandom54 Год назад

everything just feels so natural in sveltekit, what a treat.

@Huntabyte Год назад

I agree!

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

Your style of presenting this topic is amazing! I love starting from super simple, then asking the exact questions you'd do in a real scenario. It's really natural and understandable why you do stuff instead of just throwing lines of code on us. Keep it up

@paterfamilias01 Год назад

Straight to the point and extremely clear. Best svelte form actions tut by far

@Huntabyte Год назад

Thank you!

@rv7591 Год назад

You're a good teacher! I'm learnings things faster than I could from just the docs.

@cory2300 Год назад

Even though I mostly familiar with form actions at this point, I still like watching your videos and how you do it. Your voice is very calming

@Huntabyte Год назад

Thank you! That's the first time I've heard that!

@codenx2 Год назад

No one does this precise content. Thanks.

@Huntabyte Год назад

Thank you! I appreciate the kind words!

@nickstaresinic9933 Год назад

Really useful content, but what makes this series stand out from others is the smooth, natural, and confident presentation. No choppiness, no stumbling or hesitation. That makes the info easier to grasp.

@Huntabyte Год назад

Hey thanks, Nick! I appreciate that.

@messi8459 Год назад

bro this video is so well made its blowing my mind im learning things like 10x faster than i would normally by looking up docs/stack overflow

@Huntabyte Год назад

I’m glad to hear that! Thank you!

@DamonMedekMusic Год назад

This is a great video, I've studied it for the past 2 hours and created a working form. I could not have understood all of this reading just the documentation.

@Huntabyte Год назад

Check out my "Forms will never be the same video" next, it will make your life about 10x better :)

@fayking 5 месяцев назад

u dont know on how many times ive spent messing with sveltekit forms 😭😭, shouldve learnt it by this video!!

@SRG-Learn-Code Год назад

Validation is going to be lit. I'll practice what I've seen here to prepare. Thanks for sharing.

@Huntabyte Год назад

My pleasure!

@luisloyola3591 Год назад

thank you for so much and sorry for so little. With your videos I have been able to generate a complete project for college. I thank you for all your time invested, maybe soon I can send you a coffee. A hug from Chile.

@Huntabyte Год назад

You’re very welcome! Do not worry about sending a coffee, your viewership and comments are more than enough to keep the videos coming! I’m glad to hear that you were able to create a project for college!

@michaelpotter9006 Год назад

Excellent tutorial - really cleaned things up in my head.

@Huntabyte Год назад

Glad it was helpful!

@khairulhaaziq2332 Год назад

Thank you sir. Please continue making videos of svelte and sveltekit!

@Huntabyte Год назад

I will!

@shadowcodr Год назад

This was awesome. Thanks for putting this together.

@Huntabyte Год назад

Thank you! And you’re very welcome!

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

Amazing video, thanks a bunch!

@swyxTV Год назад

Sooo good! Keep it up!

@Huntabyte Год назад

Thank you! This video was difficult for me and I was a bit worried about how it would be received. I remade it probably 10 times due to it being either too simple, too complex, or not practical. Please let me know if there's anything that wasn't covered that you'd like to learn more about, I'd be more than happy to cover it!

@topaz-rn Год назад

Super helpful! Even though I've been reading the docs for form actions, I didn't notice the enhance feature, I've been using fetch to submit form this whole time hahaha.

@Huntabyte Год назад

Thank you!

@ernestkayinamura6668 Год назад

How do you specify the url you want to submit the form to?

@Huntabyte Год назад

@@ernestkayinamura6668 within the form's `action="/something"`

@kousheralam Год назад

very helpful and clear, thanks bro.

@Huntabyte Год назад

You're welcome!

@hassanmiiro1030 Год назад

Great stuff. better explanation of progressive enhancement

@gadzhikharkharov140 Год назад

This is great content. Thank you so much!

@Huntabyte Год назад

You’re very welcome!

@JoeSmith-kn5wo Год назад

Great videos! I’m going over some other tutorials but they are using the old version of SvelteKit. So, your videos are great and to the point. Your videos have helped me get up to speed quickly without the extra fluff other videos include. Keep up the great work. Do you plan on doing an entire course on the new version of SvelteKit?

@Huntabyte Год назад

Thank you! I intend on continuing to release videos focused on the different aspects of SvelteKit, but an entire course is definitely something I will consider once SvelteKit v1.0 is released!

@omargalal9004 Год назад

Please consider making a full project with Sveltekit, Tailwind, Daisy UI and Supabase! P.S. Don't drink and drive but if you do, BETTER CALL SAUL!

@Huntabyte Год назад

I am working on that almost exactly, except replacing Supabase with PocketBase!

@jasonc6241992 Год назад

This is a really good tutorial

@Huntabyte Год назад

Thank you!

@frederikclement7795 Год назад

Very useful, thanks a lot!!

@Huntabyte Год назад

You're very welcome!

@jesper.ordrup Год назад

Really awesome content. And speed is nice so nice that I dont even speedup playback as I usually do. 🙂Are you actually speeding up the video?? The validation follow up would be cool. Any thoughts on how to use a form as a component in different routes?

@Huntabyte Год назад

I do not speed the video up, however, I do edit out most pauses! To use a form as a component in different routes, you would need to use `$page.form` rather than just `form`. I have a video out currently covered validation on my channel!

@alpap6234 Год назад

Thanks!

@Huntabyte Год назад

Wow, thank you so much for the generous donation! You're very welcome!

@medimedi9082 Год назад

The Best!..you have no idea !!

@Huntabyte Год назад

Thank you!

@mahmoudaboelfadel48 Год назад

thanks Great video, Great content and clear explanation

@Huntabyte Год назад

Thank you, glad it was helpful!

@padeen2683 Год назад

By watching this I learned more than just Sveltekit. I like the whole method of coding. Top notch series!

@Huntabyte Год назад

I’m glad to hear that!

@adampatterson Год назад

Just a suggestion, it would be nice to link related videos in the description, I am new to Svelte and this is the second recommended video and now I'm onto load functions :) Awesome videos though!

@Huntabyte Год назад

Will do, I try to include cards to related videos throughout! The SvelteKit playlist on my channel has them in order of my recording!

@adampatterson Год назад

@@Huntabyte Thanks! I'm really enjoying Svelte so far!

@tonicaktas2875 Год назад

Great series on sveltekit....any suggestions how to make the tutorial in this video to work together with Netlify forms?

@aviatorgs8202 Год назад

great video!

@benjaminkarlsson6854 Год назад

This is a great Tutorial, one question though: - How do you authenticate the user in the form request? - How do you send cridentials to the server with a form POST?

@d.sherman8563 Год назад

Credentials are usually sent over from the browser as either a cookie or a header containing a jwt. How you verify the user is authenticated and has permission to access the requested resources depends on what you’re using for authentication. If you’re using oauth you would decode the jwt and check user id and scopes granted. If you’re using something like supabase they provide you with helper functions that will return you the user when you pass in the request.

@a67tejaskhandale99 Год назад

best in the game

@ykhi Год назад

For form validation you can also try to use zfd (zod form data)!

@Huntabyte Год назад

You sure can, I've used it in a few projects to handle the FormData!

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

Hello my friend, your content is realy helpfull and your explantions of sveltekit concepts are crystal clear. It would be absolutely amazing if you made a complete course ( free or paid ) about svelte-sveltekit that takes us from A-Z building a real world application ( accepting payments, logging users, seccurity etc ) and also explaining sveltekit's best practises.

@Huntabyte Год назад

This is something I will certainly consider doing once SvelteKit 1.0 is released! Thank you for the suggestion!

@CakRama01 Год назад

@@Huntabyte event it paid on udemy, definetely i will buy it ASAP

@Huntabyte Год назад

@@CakRama01 I am currently working on my own platform where I intend to host some more in-depth and detailed courses, however, I don't expect it to be complete for a few months at the very least. Thank you!

@zacchariejacquat5349 Год назад

Hey, thank you for the vid! But I don't understand why at 6:30 you say that action of restarting the server empty the array, is the sveltkit server stateful if not restarted? I thought that each time the client make the server execute the +page.server.js the array would go back to it's initial state??

@timsonner Год назад

Awesome, I’d been using uuidv4, had no idea the builtin crypto library offers the same functionality, one less dependency.

@Huntabyte Год назад

I was in your shoes a few weeks ago haha, certainly a groundbreaking discovery!

@eritech Год назад

Super

@0791679 Год назад

awesome thanks

@Huntabyte Год назад

You're welcome!

@JVSd-SG Год назад

What is the right way to send value to server script from input (type: url) after link was pasted to the field and print the result (title of url page) in another field?

@simon-olivier1227 Год назад

Your tutorials are great. One question tho: Why do you regularly test your application without JavaScript?

@Huntabyte Год назад

Thank you! That’s a great question! I test to show that the app is functional regardless of JavaScript. I know it is somewhat of a rarity that one would be without JS, but it doesn’t hurt to support regardless!

@nested9301 Год назад

is it a better practice to use use:enhance in a login page ?

@aviatorgs8202 Год назад

you briefly covered the topic on "form on a separate page" toward the end of this video, would love to see more about the best practices in that scenario, e.g. will the use:enhance implementation still be the same?

@Huntabyte Год назад

You will need to do some things a bit different if the 'action' is at a different route than the page the form is currently on. I always recommend using Super Forms (superforms.rocks) to everyone as of recently though!

@rv7591 Год назад

Have you considered releasing a full udemy course or something that covers a full app build from start to end? I'd like to learn about authentication, stripe payments, getting an app to a server and protecting it, etc. I've bought most of the other svelte courses and they aren't as clear as your FREE videos.

@eugeneXXI Год назад

Thanks! How can I get let selected: any[]; through this form? Like / ?

@philippecasasnovas6603 Год назад

Hello Hunter Thank you again for these great videos on sveltekit. I find it a bit complicated to validate the form data in the server page. Can we validate the data before submitting it ? A great weekend to you Sincerely

@Huntabyte Год назад

You can of course add client-side validation, however, you should ALWAYS validate server-side. I have a video being released on Monday that is focused on Form Validation!

@Hernan-Kza Год назад

Nice !!!!!!!!!!!!!!!

@Huntabyte Год назад

Thank you!

@tomich20 Год назад

Thanks a lot! 🤘 Is there something like a clients versión of form actions? I'm doing an offline app , thanksssss

@pickavana8056 Год назад

Thanks for this. A couple of questions. 1. @ 26:54 you explain why we have to use "use:enhance" code block as you have the form and data on same page, while many apps use separate pages and need redirect. Are you saying that if we had separate pages we dont need use:enhance? 2. @ 21:36 in console.log in "data" / "FormData" why do we not see the form fields/values?

@Huntabyte Год назад

You can't see the values because it's a FormData Object, not a POJO. You'd have to run formData.get('name') to access the values. I have a whole video dedicated to the `enhance` action on my channel!

@ridgey28 Год назад

Great video, thanks. How would you add data to the form from the server when the form loads? For example a settings page which loads/populates the name, email etc inside of the form. I'm a little lost. Any help would be appreciated.

@Huntabyte Год назад

Thank you! That’s a great question. So to populate data when the page loads, you can load the data in the load function (I assume you’re fetching these values from a database) and then instead of the empty string as the fallback form the input values, use the data prop passed from the load function.

@Huntabyte Год назад

So instead of ‘value={form?.name ?? ‘’}’ you could use either ‘value={form?.name ?? data?.name}’ or just ‘value={data?.name}’ if you aren’t validating with the form prop!

@ridgey28 Год назад

@@Huntabyte Perfect. Thanks for your prompt reply.

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

Make a video on stepper form

@TheJackTheLion Год назад

I like you the best

@pedromiranda5293 Год назад

Is there an out of the box way I can use data from a layout server load (the authenticated user, for example) in a form action? Or am I better off setting it to locals?

@Huntabyte Год назад

Locals would be the idea place.

@pedromiranda5293 Год назад

@@Huntabyte In my case I store a nullable user object in locals and then I set up a protected layout where I check if the user is null. If it is, I just throw a redirect to the login page, otherwise I return the unwrapped user object in the layout load function. I’m just not sure how I could avoid repeating this validation in my form actions since the object stored in locals is nullable. Great videos by the way. I’ve grown to love SvelteKit in just a couple of weeks and this channel was a huge factor for sure. Keep going!

@AHN1444 Год назад

Can I call a server action from a component? like with fetch but just calling directly the server function?

@Huntabyte Год назад

You'd have to use an API endpoint to accomplish this!

@believelody5531 Год назад

I have an error : "Invalid request body" when submitting form whenever I use default or create in action :/ Anyone with same issue ?

@adrianramirezvazquez2986 Год назад

How can I know if a user is already logged in using an api, I was thinking of saving the user information since the session will be created in the localstorage but I think it is not possible. Btw New subscriber here, great content :D

@dheerajs2838 Год назад

first, Great tutorial. 2nd. I have a create post page which also has a image upload. The problem is, I want user to upload the image and then see it on the page (hopefully upload on the backend storage while user filling up the form) and then user press submit .. then 2 things can happen .. all validation works .. a new post get created using actions.. no issue there. But, some validatioon error happens, in that case I can show previous form values .. but image is gone.. How to fix this?

@mikesantiago_ Год назад

I have a form (component) that pop-ups when I click from my navbar so I put it inside a layout (+layout.svelte) so the form is accessible wherever route I am in. Now how can I validate my fields in that form if the form is a pure component (not a page) which means it has no (+page.svelte) that can received the form data? I haven't tried the use:enhance with params though, but I am going on that direction and felt like that would be a solution for my case.

@Huntabyte Год назад

You will have to use the $page store!

@LuigiVampa9 Год назад

How to deal with files using form actions? My form only submits name of the file but not its contents (txt file)

@Huntabyte Год назад

I'll consider making a video of this soon!

@StarkTech47 2 месяца назад

It is a great video but I find the process super complicated and with many line for few things. Maybe it is what we must do in svelte but using this method seems so much more complex than just a simple on:submit action on the svelte component, especially for the event.preventDefaut() and the use:enhance. I am using the on:submit and I don't understand the benefits of what you are using (I know that is not only you since it is also what is written on the documentation) except the fact that to redirect in the component seems to be a real challenge because redirect and goto don't work on my side. Maybe someone would be able to give me more information on why is it better.

@aymalik1393 Год назад

I am unable to get the formData in +page.js, is there a catchy thing?

@Huntabyte Год назад

You can only get formData in +page.server.js!

@theIbraDev Год назад

Hey, how do you get that autoimport? doesn't happen for me.

@theIbraDev Год назад

Oh, i realized it's because i tried using invalid instead of fail :p

@Huntabyte Год назад

Yeah they updated that right before the 1.0 release :(, glad you were able to figure it out!

@softwarecurator Год назад

i’m getting formdata is not a function

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

`data` has been deprecated in favor of `formData`. `data` will be removed in a future version. (Called from use:enhance submit function) `form` has been deprecated in favor of `formElement`. `form` will be removed in a future version. (Called from use:enhance submit function)

@mathiasfantoni2458 Год назад

Works great! However, I want to submit my data on:blur, but when I click out of my input, the page redirects to the ?/myAction endpoint. If I just hit enter, it works like a charm like in the video, and the changes are saved to my db. But as soon as I click out of the field, the page redirects. I have used on:blue={(event) => {event.target.form.submit()}}.

@TheTenebraX23 Год назад

Hey thanks for the tutorial! I got a question that may sound silly but I can't get my head around it. Let's suppose my action on the page.server.js is slow, I would like to show a loading spinner in the ADD button. My idea was to have a "let loading" in the svelte file for contacts, this way I can conditionally render the spinner. I set this variable to true when i click the button and set to false after the promise has been resolved. The problem is that from the svelte file I don't know when the promise on the server file will be resolved. I added this logic in the enhance closure (at the start loading is true and at the end is false) but I don't think that this is a clean solution. Any idea?

@Huntabyte Год назад

I believe right now the best way to do this is within the enhance function!