React Hook Form & React 19 Form Actions, The Right Way

react 19 has come out with a new way to handle submitting forms to the server and it works when JavaScript is disabled and even though it's in react 19 we can use it today with an xjs app router but it can be tricky to combine that submission system with a form validation system like react hook form don't worry though I will walk you through it step by step and by the end you'll have a good pattern for formance validation on nextjs that gracefully degrades from client side validation if Javas is on to server side validation if JavaScript is disabled and hey this video is an extension of a free tutorial that I have up on my projs dodev site that tutorial covers four different ways of sending form data to the server and validating on both the client and on the server side it also shows you how to do field level validation on the server which is super cool but right now let's learn how to combine react hook form with nextjs and still get validation on your forms with JavaScript disabled oh one more thing I'm going to react conf May 15 through 16th so I'm super excited about it I hope to see you there I think the lottery for tickets is still open if it is be sure to jump in on that and there is a cfp for proposals for papers I strongly recommend you get in there and check it [Music] out all right so this is the form that we're going to be working with it's got a first name a last name and email down here now currently when I hit okay nothing happens so there's no client side validation we're not pushing the server or any of that so let's start off by adding some client side validation first thing we need is a schema to validate against we're going to use Zod for that we give it the names of the fields first and last we're going to go and trim those down first so that we get no white space on either side and then we're going to use use a Min one validation which is going to say it has to have at least one character and then for the email field we're going to use email validation it's pretty much nice validation right out of the box for emails okay let's go and check out our mail form all right so up at the top of our mail form we got a bunch of imports I'm actually going to collapse some of these because these are mostly just UI Imports we are going to bring in the Zod resolver that's going to connect our Zod schema to our reactor form of course we're going to bring in reactor form that's it's going to have our use form hook but after that it's mostly just Shad CN components then we bring in the schema that you just saw next thing we're going to do is inside that male form component we're going to use the use form Hook from react hook form we're going to give it a Zod resolver based resolver that's going to connect it to our schema and use the Zod schema for the validation going to give it a bunch of default values and then we're going to make sure that it understands the schema of everything by using the Z output type of schema as the template that seems like a lot here let me just fix that for you go over here to type and that's actually what's coming out of it it's just the first last and email defined as strings all right let's go take a look down the jsx we've got a Shad CN form component that wraps a real form tag then we got a div that contains two form Fields now these components like form form item form label form control are all from Shad CN but they are meant to integrate with react form and Zod so that's part of that pattern so we got one form field for the first name then the last name and finally at the end the email and then we got a button of type submit I'm going to go and roll these up because we really don't need all that detail we're not even going to be changing any of those to make this thing validate all we need to do is go to our form and then add on submit and we'll get a Handler submit Handler from form now it takes a function that's going to get called if you have a valid form so I'm just going to put in console log for the moment all right let's go check it out I'll hit submit and voila we actually have client ey validation and if I actually put in all my email and stuff there we go I'll hit submit and if we take a look in the console we can see that we got an object that has email first name and last name that has all those field so that's what that handle submit is sending us from react hook form okay now that looks good right so what's the next thing to do well the next thing to do is go and send it to the server so let's go and check out what the server looks like now on the server side we've got a form submit module it has one exported function on submit action and we know it's a server action because up at the top we've got you server and that means that any function defined in this file is a server action now this onsubmit action takes form data as input it then converts that form data object into a regular JavaScript object using object from entries that gives you form data and then it uses the Zod schema safe pars to actually check out whether that schema is valid on the server and that's actually really important because you actually want to do validation both on the client side and on the server side regardless of if you ever choose to support JavaScript being disabled you always want to do it on both the client and the server because this is basically an endpoint on your server and you want to make sure that everything going into the endpoint is validated regardless of where it comes in from now Parts gives us back success and we can say well if that's not successful then return a message of invalid form data then we're going to do a weird check on the data email and we're going to say well if it includes an a then it's an invalid email that's just kind of a proxy for some kind of server check that you can't do on the client necessarily so we'll get into that in a little bit but let's say everything works and it's hunky dory then we'll get a user registered right at the end okay so let's go and invoke this so create a non-summit function and for input it's going to take data and the shape of that data is first last in email as a JavaScript object it's not a form object now let's go and bring in that onsubmit action straightforward all you need to do is just import it and then we'll call on submit action with that data now of course that doesn't work because data in this case is not of type form data it's of type well first name last name and email as an object so how do we convert it into form data well we go and Rec create a new object called form data of type form data and then we append to that form data all of our original data now we can pass that on to onsubmit action of course we want to take a look at that message coming back so let's go and await that onsubmit action and then put it out the console log now in order to use an await we have to make an async function one last thing to do we got to take our onsubmit and replace the console log with that onsubmit okay let's go try it out so I'm going to use the first name and last name of anything and then in the email because I want to be valid and not have any A's I'm going to use just ljk and there you go. all right let's go over and check out our console hit submit and there you go a message back from the server user registered so that went all the way out of the server ran through the validation on the server checked to go and see if there's an A in the email and there wasn't so we got back this cool message but let's try it with JavaScript disabled so I'm weing up command shift p in the dev tools type in JavaScript and I will disable JavaScript all right let's hit refresh try this again hit submit and well we get a something something's going somewhere we actually get a URL change up here and the form vanishes but nothing actually happens so well what's happening is we are actually trying to do a form submit the form tag doesn't have method post on it so so it defaults to it get and that's how you get the URL with the extra data up at the top not great and did it hit the server well we don't know so let's actually go and add a console log to the server and see okay let's try it again and it didn't even hit the server so what's going on all right in order to hit the server what we need to do is specify this onsubmit action as an action all right let's give it a try wait submit and still nothing all right so in order to make this work I need to bring in a new Hook from react Dom and that new Hook is use form state so above that use form hook that we brought in before we're going to bring in the use form State hook and then give it our action as the first argument now the second argument is interesting so what happens is this Ed form State hook actually takes State as the second variable and it manages state to and from the server we send it the state as previous state and then we get the state back and so and so this first version of that state is message with nothing in it now onsubmit action is giving us a red squiggly there what's it's telling us is that our API signature for onsubmit Action is not right so let's go over to our onsubmit action and what we need to do is tell that we have previous state as the first argument now let's go take a look at mail form and it seems to be okay cool awesome so now given the onom in action it gives us back a new form action that we can then use as action cool all right looks good and for the moment let's just disable on submit and let's see how it goes all right let's go check out the server and awesome we got the output of Zod saying that success is true it's got the data that we need so that's good now we're actually talking to the server so now let's try and bring back the client side validation so let's reenable on submit and we got our form handle submit but we really don't want to call on submit so what do we want to do well we really don't want to have this at all because we actually have that form action getting called here so how are we going to handle this well what we really want to do is when handle submit says go we want to submit the form form and have form action take off and do its thing so to do that we need to actually just invoke submit on the form tag to do that we need a reference to the form tag so let's bring in user F and then create a form ra and then assign that to the form and now we give that handle submit a callback function that says just call submit on the form tag if it works okay let's give it a try next thing we need to do do of course is enable JavaScript so let's go back here and enable JavaScript H refresh and then let's make sure that it's working so yeah we get an invalid email address locally okay cool submit and there you go let's go see if it worked on the server and it did so now we're getting both client side validation and server side validation awesome but now we are getting a message back from our form submit down here we're getting that cool message let's go take that message and put it into the UI so right at the top here we'll say that if we have a message we'll put it out so let's give it a try all right so let's try a first name a last name and then an email that has A's in it because I want to fail the server side validation let's hit submit and we get an invalid email taada Okay cool so we're getting that message back and we're putting it into the UI but this is kind of a drag as a user experience right because I already put in my last name and first first name and now you just voided out the whole thing which is not great so is there a way that you can send those fields back to me in the case of an invalid email and then I can repopulate this form so that we don't lose all that information well sure let's go give it a go so back in our form submit I'm going to say that optionally coming out of here is a set of fields and then if we get an invalid email then we just send the fields back that we got out of Zod they're located inside of data inside that pars object right so let's go to mail form go back up here we don't have to put in fields it's an optional parameter but down here we can say that if we have fields we can have them override the default values all right let's hit save try again and again an email with an a in it let's hit submit and now we get the invalid email and we also to get all of our Fields back so nice so let's try the first name and email valid and see what happens I hit submit I get invalid form data and we've lost the field data so first let's go and fix this field data problem we need to go and send back the fields so the issue here is we're getting a successful as false from Zod so that's great but now there's no data from Zod to go and send as the fields so we need to go and get the fields from the original form data now we could just use form data as the fields right well not really because in reality form data is a set of form data value values and not strings so that's what we're looking for is strings we need to convert them into Strings and then send that back so I'm going to create a new value called fields we iterate through each one of those and then just use two string on each one to give us key and then value as string all right let's give it a go and then try the same test again and now we retain those fields values but we still don't give a list of all the invalid Fields so really don't know from invalid form data which one of the fields is wrong we want to say that the last name in this case was wrong we actually have that data in Zod so what we can do is we can get return a list of issues which I'm going to just Define as the list of strings now you could do like a field to string map if you want to do that I'm just going to go and take all the issues out of Zod and turn that into an array to do that I'm going to go through all the errors and then do a map where you just take the issue. message from the error all right now let's display that so down here if we have a message but we don't have issues then put on the message otherwise if we do have issues then just go iterate through them and create an unordered list that has all the issues all right let's give it a go and now we get last name is required cool and just put a little icing on this cake let's give it a nice little UI flourish we'll bring in an X icon and then right here inside the list item We'll add an icon for X now resubmit and we got a nice little X that says last name is required all right let's see if this still works if you have JavaScript enabled let's just hit submit on a blank form got all the client side validation got the server side validation and we get the user registration response if it's all good well this is but a taste of what you're going to get in the free tutorial up on pron nextjs dodev you'll get four different ways of sending data to the server you'll get a awesome way to go and do field level validation on the server side it's a fantastic tutorial I really encourage you to try it out meantime of course if you have any questions or comments about this particular video be sure to put those in the comment section right down below if you like the video hit that like button if you really like the video hit the Subscribe button of and of course if you can try out that lottery for reacton 2024 it's gonna be a great show I'll see you there

Channel: Jack Herrington

Views: 28,069

Keywords: next, react, nextjs app, next js, nextjs api, nextjs router, nextjs 14, tailwind nextjs, react 19, react compiler, jack herrington, jack harrington, nextjs forms, nextjs react hook form, react hook forms, form actions nextjs, form actions, nextjs app router, nextjs 14 forms, nextjs 14 form actions, react js 19, react19, react conf 2024, react forget compiler, react 19 release, react 19 features, react version 19, reactjs 19, react 19 new features, react 19 changes

Id: VLk45JBe8L8

Length: 16min 8sec (968 seconds)

Published: Mon Feb 26 2024