Mastering Form Submissions in Remix with react-hook-form, remix-hook-form, zod, and Shadcn-UI

ever felt like this dog when somebody assigns A  J ticket to you to do a complex form yeah you do   well let's talk about it if you watched any of my  other videos you might have noticed that I really   like to go in depth and explain how something  works with these diagrams and then actually jump   into the code and this video will be no different  so before we actually go into form handling let's   first understand the trip that the form takes  from the client to the server so the first thing   that we need to understand here is that we have  to gather the data on the client how we can do   that is either by using a form library or just  providing HTML inputs and allowing the user to   enter the information that part is really up to  you and after you gather the information you have   to send it to the server somehow even though the  code is in the same file the boundary between the   loader and the reaction and the actual react code  is really big you have to understand that even   though the code is collocated that doesn't mean  it's collocated when it's deployed so the loaders   and actions run on a server and your react client  code runs on the client in the browser so what   this means is whenever we submit a form it has  to go to a server and how that works is we have   to serialize the data so we have to serial ize it  and then send it to the server and serialization   is nothing more than turning the data into an  appropriate format because you can't just send   for example numbers and booleans and everything  else across the wire you have to convert it to   appropriate format and then send it for example  if you want to send it as Json we have to turn   it into a Json object and form data takes only  two kinds of values it's either strings or file   files which means you have to turn every other  type of value into a string and then send it to   the server so for example let's imagine we have  an object that has a number in it so we have to   turn this number here that's of type number into  a string and then we can send it to the server and   this is basically what serialization means so we  basically turn all the types into Strings and then   send them to the server and then when they hit the  server they're given to an appropriate action or a   loader depending if it's a get or a post request  and then because everything is a string inside of   form data that we've gotten we have to somehow  deserialize the data and how do we do that is   basically we turn all the keys back to what they  were so for example if we sent a string number   one we turn it back to a number and so on and so  forth so basically we have to have some kind of   mechanism that's going to turn our serialized  data into the original type of data that we   sent so for example we parse the Json that we've  gotten we do something like a transformation on   arrays or something like that and then we get the  row data here so when we get the row data we have   to validate it on the server to make sure that  the data we've gotten is correct so for example   if our D serialization process is wrong we might  have expected an array but we've gotten something   else for example a string that looks like an  array but it's not and after we we validate the   data we can do something with it so this process  requires you to have some kind of validation in   today's tutorial I'll use Zod but you can do  anything else you can even not validate it if   that's what you like like and you like to live  dangerously and after we've validated the data   itself we have our valid data here and then what  we can do with this valid data is on the action   side of things process it in some way that we can  use the data to do something else so for example   if we updating the user information we send it  from the client to the server we deserialize the   information we valid it and then after we have the  valid data we do something in our action with it   for example we store the updated information in  a database and then we send the response back to   our client and then the client handles the rest  so in this case we can either redirect to a new   page or we can just return some Json or whatever  else and then the client can handle it and show a   toast or something like that and that's our basic  flow here because we'll be using react hook form   today it's really important to understand what  part of this flow react hook form handles for   us so because react hook form at the time of  filming is a client Focus Library it's covers   the validation and Gathering of data on the client  this means that it covers this part but it doesn't   cover the rest of this here so what we're going to  use today is is a package called remix hook form   which handles the following parts it handles the  serialization so it serializes the data for you it   handles the sending of the data to the server it  handles the D serialization part and then it also   handles validation so you can get to this part  and then after you covered all of these parts   you're good to use this data for whatever you  need it for so now that we understand how this   process works and how we will get to the valid  data part let's actually see that part in action   as you might have already guessed we're going to  be using Shad CN UI for this so the easiest way   to install it is to just go to their documentation  website go to the installation part here and after   that you have Frameworks and obviously we want  remix after we click on remix you can basically   follow this in inside of your remix application  and after you're done with all the questions and   you can basically answer these questions to the  CLI that they ask you you install Tailwind after   that by running this you add this configuration  inside of post CSS config JS file and after that   in remix config JS you just add these two and  after you're done with all of that you just add   the link for to the styles to the links function  in your root TSX file and that's pretty much it   and then you can just run this command without  the button here to just see the list of all the   components you can add to your project you can  select what you want to add and then go from   there for this tutorial I'll be using mostly their  components like input uh select checkbox and so on   so it's really up to you what you want to use I  know that they have a form here component and if   you look at this this uses a lot of things under  the hood you can go through it but basically they   use react hook form here and Zod and how it works  is is basically they give you a lot of utilities   on top of react hook form to handle your forms you  can go with this as well but the main issue I have   with this is that a lot of form components are  controlled here and I really don't like control   compon components I think that uncontrolled is  the way to go but it's really up to you if you   want to do control components you can but the only  thing I would change if you install the form here   is I would change the name of the main component  from form if I go here and expand this so I would   change this to be called form provider because  it's this is not really a form component that's   AIDS the form this is a form provider context that  react hook form provides to you so the naming is   a little bit off here and that's just something  to keep in mind but that's just really up to you   because if you look at their example you can  see that they use form here and then form here   and basically it's a little bit confusing because  this is the form provider context and this is the   actual form so just keep that in mind and now  that we've installed chian UI into our project   let's go back and add whatever else we need all  right so if you follow the tutorial up to this   point the only other thing that you'll need to  add to this is remix hook form so you can do that   by just running mpm install remix hook form and  it's going to install the latest version for you   I've already done it in this project but you get  the point now that we done that let's go to the   fruit route here and I've already set up a simple  form for us so we will basically be submitting   our favorite fruit to the back and we specify our  name we set the number of years we've been eating   fruit and basically we select our fruit and agree  to the terms of service and we submit the form so   if we go to the browser we can see how it looks  like so let's switch right now all right so here   is our simple form here and if we try to enter our  name we set the number of years we've been eating   fruit and then we select one of these so I'll go  with pineapple and we accept the terms of service   and then we click login this is already going  to submit the information to our backend so if I   click this and go back to the vs code we will see  that we already made a post request with the data   to the back end all right so now that we back in  me code I have prepared some code for us and also   you can see that the post request went in and the  name the years the fruit and the terms were sent   to the back end and as you can see the terms are  on because that's how checkboxes work by default   and the years have been serialized into a string  so this is what I was talking about earlier when   I said that the data gets serialized and sent to  the server so let's see how we can use remix hook   form to actually get a nicer backend data object  and also how we can use it to validate it on the   front end and serialize it and send it to the  back end so I've prepared this Zod schema here   it's nothing special it just requires you to have  the term set to true the name has to be set and so   do the years and the fruit and I've also created  this resolver here so it uses the res resolver   from Hook form and we just give it that schema and  then what we're going to do here is give this to   the use remix form from remix hook form and what  this is going to do for us is it's going to give   us a handle submit function and what we're going  to do here is we're going to give it to our remix   form and what this is going to do behind the  scenes is this will submit to the right method   and action and it's going to serialize the data  for us in the format that we're going to expect   on the back end and that we're going to use  utilities from remix hook form to pass that   data so now that we've added the handle submit  here it's automatically going to submit all of   the data serialized to the back end and it's going  to go into this section so now that we have the   front end part done we validate the data here we  submit to the right end point and serialize the   data we now need to deserialize it here so what  we're going to do here is we're going to say await   get validated form data from Hook form and we're  going to give it the request and the resolver so   there we go and what this is going to return are  three things so the first one is received values   the second one is errors and the third one is  going to be data and how this works is this is   a discriminated Union so if there are any errors  here we're just going to return them as Json and   what this is going to do is it's going to return  the data to the front end and then the use remix   form is going to automatically populate the form  state with those errors and what we're also going   to do is we're going to return the received values  so if we want Progressive enhancement here what   this is going to do is if we receive the values  and there's no JavaScript loaded this will set   this as the default values on the fields and then  it will act like the User submitted the values and   he got the errors but the inputs didn't clear  so this is also a utility from remix hook form   and then after we're done with this if there are  no errors we will have fully validated data here   and also I forgot that we need to type this so  this is going to be Zod do infer type of schema   and then we close it here and you hover over these  this is going to be a number this will be a string   and also this will be a string here and then what  we can do with the data is we can for this example   conso log it but in our examples we could use it  to do something else with it all right so in order   for our form to work I've added a couple of things  so the first thing is I've typed this hook to be   of this schema so the same as the back end one and  I've set the default values to be what they should   be so the name the year the fruit and the terms  and what I've also done here is I'm watching for   the terms so I can know if they're true or not  and what we're going to do here is we're going   to say register the name input because because  it's a normal text field on blur of the other   input we're just going to set the number of years  to be the number and on the select we're going to   set on value change to set the value of fruit  to whatever this value is so whenever a user   clicks on the select option it's going to set  that as the current fruit and on the check box   whenever it's clicked we're going to change the  terms to whatever it wasn't before so basically   a talk and then we show the error here on terms  if we have an error that's supposed to be shown   so let's see how that works in action we have our  form here so if I enter my name I say I've been   eating fruit for 5 years and then I select some  fruit so for example bananas and I don't accept   the terms and I click login I get this error and  if I accept this and login again this will be sent   to the back end and if we go back to vs code  we can see that the end point was hit and the   most important thing is name is a string years  is not a string anymore it's been deserialized   to be a number and the fruit is banana and this  has already been validated by the resolver here   and it's valid so it didn't go into the errors  here which means that we have valid data at this   point and we can do whatever we need to do with it  so that's the cool thing about remix hook form it   gets you to that point where you have the valid  data so much quicker so you can move quicker and   a full disclaimer here I'm the actual creator of  remix hook form and I'm actually working to get   this merged into react hook form so in the near  future this might all be supported by react hook   form itself so you wouldn't even need to use  this package so if you're interested in that   you can check it out on their repository but  for now you can just use remix hook form to   get things done quicker and easier here and this  is it for today we've actually handled forms and   we now know how to do form handling in remix and  the cool thing about it is that this works for any   form library and if you want to roll your own  you can also do that so the important thing to   note here is you need to serialize the data you  need to deserialize it and then validate it and   that's it for today if you enjoyed the video  consider liking it and leaving some comments   down below if you have any questions thank you  for watching and see you in the next one bye

Channel: Alem Tuzlak

Views: 1,664

Keywords: #RemixFormSubmissions, #ReactHookForm, #RemixHookForm, #ShadcnUI, #FormValidationInRemix, #ReactJavaScriptFramework, #FormSerialization, #FormDeserialization, #WebDevTutorial, #RemixTutorial, #ZodValidation, #FormBuildingDemo, #ClientSideFormEnhancements, #ServerSideFormEnhancements, #WebDevTools, #FullStackFormValidation, #CodingDemo, #SubscribeForMore, #CoolBirdOutro, #remix, #remixRunTutorial, remix, remix-run, remix js, remix js tutorial

Id: iom5nnj29sY

Length: 17min 32sec (1052 seconds)

Published: Sat Jan 13 2024