Form Actions Made Simple

[@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 KZbin! Please make a full project with latest Sveltekit with capacitor

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

[@paterfamilias01]

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

[@Huntabyte]

Thank you!

[@benediktzwolfer4193]

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

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

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

[@rv7591]

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

[@MrRandom54]

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

[@Huntabyte]

I agree!

[@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 :)

[@codenx2]

No one does this precise content. Thanks.

[@Huntabyte]

Thank you! I appreciate the kind words!

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

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

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

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

[@khairulhaaziq2332]

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

[@Huntabyte]

I will!

[@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"`

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

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

[@hmiiro]

Great stuff. better explanation of progressive enhancement

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

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

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

[@michaelpotter9006]

Excellent tutorial - really cleaned things up in my head.

[@Huntabyte]

Glad it was helpful!

[@benjamin_karlsson]

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.

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

[@ΑλεξανδροςΞανθοπουλος-ξ4η]

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!

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

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

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

[@kousheralam]

very helpful and clear, thanks bro.

[@Huntabyte]

You're welcome!

[@andersugland8284]

Amazing video, thanks a bunch!

[@shadowcodr]

This was awesome. Thanks for putting this together.

[@Huntabyte]

Thank you! And you’re very welcome!

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

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

[@nested9301]

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

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

[@tonicaktas2875]

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

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

[@gadzhikharkharov140]

This is great content. Thank you so much!

[@Huntabyte]

You’re very welcome!

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

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

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

[@jasonc6241992]

This is a really good tutorial

[@Huntabyte]

Thank you!

[@mahmoudaboelfadel48]

thanks Great video, Great content and clear explanation

[@Huntabyte]

Thank you, glad it was helpful!

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

[@rossvold]

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

[@rossvold]

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!

[@fayking]

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

[@eugeneXXI]

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

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

[@Rubberduckerino]

How would it work if the form was an component?

[@andrewthomas3947]

Make a video on stepper form

[@NotAllHeroesWearCapes-101]

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?

[@medimedi9082]

The Best!..you have no idea !!

[@Huntabyte]

Thank you!

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

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

[@tomich20]

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

[@frederikclement7795]

Very useful, thanks a lot!!

[@Huntabyte]

You're very welcome!

[@believelody5531]

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

[@StarkTech47]

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.

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

[@nullprophet10]

best in the game

[@softwarecurator]

i’m getting formdata is not a function

[@aviatorgs8202]

great video!

[@0791679]

awesome thanks

[@Huntabyte]

You're welcome!

[@brunofrancosentis5148]

Thanks!

[@Huntabyte]

You're very welcome!

[@eritech]

Super

[@Hernan-Kza]

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

[@Huntabyte]

Thank you!

[@TheJackTheLion]

I like you the best

[@drivebuss8079]

`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()}}.

[@alpap6234]

Thanks!

[@Huntabyte]

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