const{Fragment:l,jsx:e,jsxs:n}=arguments[0];function _createMdxContent(r){const s={a:"a",code:"code",figure:"figure",h3:"h3",mark:"mark",p:"p",pre:"pre",span:"span",...r.components};return n(l,{children:[e(s.p,{children:'If your app interacts with an API, it\'s crucial to validate inputs before making\nany requests. Imagine a sign-up form with fields for email and password. If the\nuser types "HelloWorld" in the email field, that’s clearly not an email.'}),"\n",n(s.p,{children:['While your API might catch it and return an error like "The email must be\nvalid," it’s more efficient to validate on both the frontend and backend. This\nsaves time by catching errors before making unnecessary requests. So, let’s dive\ninto how to set up validation using ',e(s.a,{href:"https://zod.dev/",children:"Zod"})," and\n",e(s.a,{href:"https://www.react-hook-form.com/",children:"React Hook Form"}),"."]}),"\n",e(s.h3,{children:"Step 1: Install Zod and React Hook Form"}),"\n",e(s.p,{children:"First, install the necessary packages:"}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"bash","data-theme":"tokyo-night",children:e(s.code,{"data-language":"bash","data-theme":"tokyo-night",style:{display:"grid"},children:n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C0CAF5"},children:"yarn"}),e(s.span,{style:{color:"#9ECE6A"},children:" add"}),e(s.span,{style:{color:"#9ECE6A"},children:" react-hook-form"}),e(s.span,{style:{color:"#9ECE6A"},children:" zod"}),e(s.span,{style:{color:"#9ECE6A"},children:" @hookform/resolvers"})]})})})}),"\n",e(s.h3,{children:"Step 2: Define a validation schema with Zod"}),"\n",e(s.p,{children:"Now, we’ll create a schema to define our form’s structure and validation rules:"}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"ts","data-theme":"tokyo-night",children:n(s.code,{"data-line-numbers":"","data-language":"ts","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"import"}),e(s.span,{style:{color:"#9ABDF5"},children:" { "}),e(s.span,{style:{color:"#0DB9D7"},children:"z"}),e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#7DCFFF"},children:" from"}),e(s.span,{style:{color:"#89DDFF"},children:' "'}),e(s.span,{style:{color:"#9ECE6A"},children:"zod"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),e(s.span,{style:{color:"#BB9AF7"},children:" SignUpSchema"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"object"}),e(s.span,{style:{color:"#9ABDF5"},children:"({"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#73DACA"},children:" email"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"string"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"email"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#73DACA"},children:" password"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"string"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"min"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#FF9E64"},children:"3"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"max"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#FF9E64"},children:"20"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:"})"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:"type"}),e(s.span,{style:{color:"#C0CAF5"},children:" SignUpSchemaType"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#C0CAF5"},children:"infer"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",n(s.p,{children:["Here, we’re saying the ",e(s.code,{children:"email"})," must be a string and a valid email format, and\n",e(s.code,{children:"password"})," must be a string between 3 and 20 characters."]}),"\n",e(s.h3,{children:"Step 3: Set up the form component"}),"\n",e(s.p,{children:"Let’s create a basic form with fields for email and password:"}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:n(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"export"}),e(s.span,{style:{color:"#7DCFFF"},children:" default"}),e(s.span,{style:{color:"#BB9AF7"},children:" function"}),e(s.span,{style:{color:"#7AA2F7"},children:" App"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),e(s.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"form"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"button"}),e(s.span,{style:{color:"#BB9AF7"},children:" type"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"submit"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#9AA5CE"},children:"Submit"}),e(s.span,{style:{color:"#BA3C97"},children:""})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:" )"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#9ABDF5"},children:"}"})})]})})}),"\n",e(s.h3,{children:"Step 4: Add React Hook Form"}),"\n",n(s.p,{children:["Now we’ll integrate ",e(s.code,{children:"useForm"})," from React Hook Form:"]}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:n(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"import"}),e(s.span,{style:{color:"#9ABDF5"},children:" { "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#0DB9D7"},children:"useForm"})}),e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#7DCFFF"},children:" from"}),e(s.span,{style:{color:"#89DDFF"},children:' "'}),e(s.span,{style:{color:"#9ECE6A"},children:"react-hook-form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"import"}),e(s.span,{style:{color:"#9ABDF5"},children:" { "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#0DB9D7"},children:"zodResolver"})}),e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#7DCFFF"},children:" from"}),e(s.span,{style:{color:"#89DDFF"},children:' "'}),e(s.span,{style:{color:"#9ECE6A"},children:"@hookform/resolvers/zod"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"export"}),e(s.span,{style:{color:"#7DCFFF"},children:" default"}),e(s.span,{style:{color:"#BB9AF7"},children:" function"}),e(s.span,{style:{color:"#7AA2F7"},children:" App"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:" const"}),e(s.span,{style:{color:"#89DDFF"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#BB9AF7"},children:"register"})}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" handleSubmit"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C0CAF5"},children:" formState"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#89DDFF"},children:" {"}),e(s.span,{style:{color:"#BB9AF7"},children:" errors"}),e(s.span,{style:{color:"#89DDFF"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#89DDFF"},children:" }"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#7AA2F7"},children:" "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#7AA2F7"},children:"useForm"})}),e(s.span,{style:{color:"#89DDFF"},children:"<"}),e(s.span,{style:{color:"#C0CAF5"},children:"SignUpSchemaType"}),e(s.span,{style:{color:"#89DDFF"},children:">"}),e(s.span,{style:{color:"#9ABDF5"},children:"({"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#73DACA"},children:" resolver"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#7AA2F7"},children:" "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#7AA2F7"},children:"zodResolver"})}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#C0CAF5"},children:"SignUpSchema"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:" })"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),e(s.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"form"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#7AA2F7"},children:"register"})}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"}),e(s.span,{style:{color:"#BA3C97"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#7AA2F7"},children:"register"})}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#BA3C97"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"button"}),e(s.span,{style:{color:"#BB9AF7"},children:" type"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"submit"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#9AA5CE"},children:"Submit"}),e(s.span,{style:{color:"#BA3C97"},children:""})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:" )"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#9ABDF5"},children:"}"})})]})})}),"\n",n(s.p,{children:["We’ve added ",e(s.code,{children:"useForm"})," to handle form validation using ",e(s.code,{children:"zodResolver"})," to connect\nour Zod schema."]}),"\n",e(s.h3,{children:"Step 5: Display validation errors"}),"\n",e(s.p,{children:'Next, we’ll show error messages below the inputs if validation fails. For\nexample, if someone enters "HelloWorld" as their email, it’ll trigger an error:'}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:n(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:"return"}),e(s.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"form"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),e(s.span,{style:{color:"#7AA2F7"},children:"register"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"}),e(s.span,{style:{color:"#BA3C97"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"email"}),e(s.span,{style:{color:"#BB9AF7"},children:" &&"}),e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"span"}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#7DCFFF"},children:"{"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#C0CAF5"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"message}"}),e(s.span,{style:{color:"#BA3C97"},children:""}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),e(s.span,{style:{color:"#7AA2F7"},children:"register"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"}),e(s.span,{style:{color:"#BA3C97"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"password"}),e(s.span,{style:{color:"#BB9AF7"},children:" &&"}),e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"span"}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#7DCFFF"},children:"{"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#C0CAF5"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"message}"}),e(s.span,{style:{color:"#BA3C97"},children:""}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"button"}),e(s.span,{style:{color:"#BB9AF7"},children:" type"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"submit"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#9AA5CE"},children:"Submit"}),e(s.span,{style:{color:"#BA3C97"},children:""})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",e(s.p,{children:"Now, when there’s an error in either the email or password field, the relevant\nerror message will display."}),"\n",e(s.h3,{children:"Step 6: Handling form submission"}),"\n",n(s.p,{children:["Finally, we handle form submission with validation. When the form passes all\nchecks, the ",e(s.code,{children:"onSubmit"})," function will execute:"]}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:n(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),e(s.span,{style:{color:"#7AA2F7"},children:" "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#7AA2F7"},children:"onSubmit"})}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#C0CAF5"},children:" SubmitHandler"}),e(s.span,{style:{color:"#89DDFF"},children:"<"}),e(s.span,{style:{color:"#C0CAF5"},children:"SignUpSchemaType"}),e(s.span,{style:{color:"#89DDFF"},children:">"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#9ABDF5"},children:" ("}),e(s.span,{style:{color:"#E0AF68"},children:"data"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#BB9AF7"},children:" =>"}),e(s.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C0CAF5"},children:" console"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"log"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#C0CAF5"},children:"data"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:"}"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:"<"}),e(s.span,{style:{color:"#F7768E"},children:"form"}),e(s.span,{style:{color:"#BB9AF7"},children:" "}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#BB9AF7"},children:"onSubmit"})}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#7DCFFF"},children:"{"}),e(s.span,{style:{color:"#7AA2F7"},children:"handleSubmit"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.mark,{"data-highlighted-chars":"",children:e(s.span,{style:{color:"#C0CAF5"},children:"onSubmit"})}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#51597D",fontStyle:"italic"},children:"/* form fields */"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:""}),e(s.span,{style:{color:"#89DDFF"},children:";"})]})]})})}),"\n",e(s.h3,{children:"Full example"}),"\n",e(s.p,{children:"Here’s the complete code for reference:"}),"\n",e(s.figure,{"data-rehype-pretty-code-figure":"",children:e(s.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"tsx","data-theme":"tokyo-night",children:n(s.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"import"}),e(s.span,{style:{color:"#9ABDF5"},children:" { "}),e(s.span,{style:{color:"#0DB9D7"},children:"z"}),e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#7DCFFF"},children:" from"}),e(s.span,{style:{color:"#89DDFF"},children:' "'}),e(s.span,{style:{color:"#9ECE6A"},children:"zod"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"import"}),e(s.span,{style:{color:"#9ABDF5"},children:" { "}),e(s.span,{style:{color:"#0DB9D7"},children:"useForm"}),e(s.span,{style:{color:"#89DDFF"},children:","}),e(s.span,{style:{color:"#0DB9D7"},children:" SubmitHandler"}),e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#7DCFFF"},children:" from"}),e(s.span,{style:{color:"#89DDFF"},children:' "'}),e(s.span,{style:{color:"#9ECE6A"},children:"react-hook-form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"import"}),e(s.span,{style:{color:"#9ABDF5"},children:" { "}),e(s.span,{style:{color:"#0DB9D7"},children:"zodResolver"}),e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#7DCFFF"},children:" from"}),e(s.span,{style:{color:"#89DDFF"},children:' "'}),e(s.span,{style:{color:"#9ECE6A"},children:"@hookform/resolvers/zod"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:"const"}),e(s.span,{style:{color:"#BB9AF7"},children:" SignUpSchema"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"object"}),e(s.span,{style:{color:"#9ABDF5"},children:"({"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#73DACA"},children:" email"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"string"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"email"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#73DACA"},children:" password"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"string"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"min"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#FF9E64"},children:"3"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"max"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#FF9E64"},children:"20"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:"})"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:"type"}),e(s.span,{style:{color:"#C0CAF5"},children:" SignUpSchemaType"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#C0CAF5"},children:" z"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#C0CAF5"},children:"infer"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:"export"}),e(s.span,{style:{color:"#7DCFFF"},children:" default"}),e(s.span,{style:{color:"#BB9AF7"},children:" function"}),e(s.span,{style:{color:"#7AA2F7"},children:" App"}),e(s.span,{style:{color:"#9ABDF5"},children:"()"}),e(s.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:" const"}),e(s.span,{style:{color:"#89DDFF"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" register"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" handleSubmit"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C0CAF5"},children:" formState"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#89DDFF"},children:" {"}),e(s.span,{style:{color:"#BB9AF7"},children:" errors"}),e(s.span,{style:{color:"#89DDFF"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#89DDFF"},children:" }"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#7AA2F7"},children:" useForm"}),e(s.span,{style:{color:"#89DDFF"},children:"<"}),e(s.span,{style:{color:"#C0CAF5"},children:"SignUpSchemaType"}),e(s.span,{style:{color:"#89DDFF"},children:">"}),e(s.span,{style:{color:"#9ABDF5"},children:"({"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#73DACA"},children:" resolver"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#7AA2F7"},children:" zodResolver"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#C0CAF5"},children:"SignUpSchema"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:" })"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9D7CD8",fontStyle:"italic"},children:" const"}),e(s.span,{style:{color:"#7AA2F7"},children:" onSubmit"}),e(s.span,{style:{color:"#89DDFF"},children:":"}),e(s.span,{style:{color:"#C0CAF5"},children:" SubmitHandler"}),e(s.span,{style:{color:"#89DDFF"},children:"<"}),e(s.span,{style:{color:"#C0CAF5"},children:"SignUpSchemaType"}),e(s.span,{style:{color:"#89DDFF"},children:">"}),e(s.span,{style:{color:"#89DDFF"},children:" ="}),e(s.span,{style:{color:"#9ABDF5"},children:" ("}),e(s.span,{style:{color:"#E0AF68"},children:"data"}),e(s.span,{style:{color:"#9ABDF5"},children:") "}),e(s.span,{style:{color:"#BB9AF7"},children:"=>"}),e(s.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C0CAF5"},children:" console"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7AA2F7"},children:"log"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#C0CAF5"},children:"data"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:" }"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),e(s.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"form"}),e(s.span,{style:{color:"#BB9AF7"},children:" onSubmit"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#7DCFFF"},children:"{"}),e(s.span,{style:{color:"#7AA2F7"},children:"handleSubmit"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#C0CAF5"},children:"onSubmit"}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"form"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"}),e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),e(s.span,{style:{color:"#7AA2F7"},children:"register"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"}),e(s.span,{style:{color:"#BA3C97"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"email"}),e(s.span,{style:{color:"#BB9AF7"},children:" &&"}),e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"span"}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#7DCFFF"},children:"{"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#C0CAF5"},children:"email"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"message}"}),e(s.span,{style:{color:"#BA3C97"},children:""}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"input"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" className"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"input"}),e(s.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BB9AF7"},children:" placeholder"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#F7768E",fontWeight:"bold"},children:"..."}),e(s.span,{style:{color:"#7AA2F7"},children:"register"}),e(s.span,{style:{color:"#9ABDF5"},children:"("}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ABDF5"},children:")"}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#BA3C97"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#7DCFFF"},children:" {"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"password"}),e(s.span,{style:{color:"#BB9AF7"},children:" &&"}),e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"span"}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#7DCFFF"},children:"{"}),e(s.span,{style:{color:"#C0CAF5"},children:"errors"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#C0CAF5"},children:"password"}),e(s.span,{style:{color:"#89DDFF"},children:"."}),e(s.span,{style:{color:"#7DCFFF"},children:"message}"}),e(s.span,{style:{color:"#BA3C97"},children:""}),e(s.span,{style:{color:"#7DCFFF"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" <"}),e(s.span,{style:{color:"#F7768E"},children:"button"}),e(s.span,{style:{color:"#BB9AF7"},children:" type"}),e(s.span,{style:{color:"#89DDFF"},children:"="}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#9ECE6A"},children:"submit"}),e(s.span,{style:{color:"#89DDFF"},children:'"'}),e(s.span,{style:{color:"#BA3C97"},children:">"}),e(s.span,{style:{color:"#9AA5CE"},children:"Submit"}),e(s.span,{style:{color:"#BA3C97"},children:""})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9ABDF5"},children:" )"}),e(s.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#9ABDF5"},children:"}"})})]})})}),"\n",e(s.h3,{children:"Conclusion"}),"\n",n(s.p,{children:["That’s it! With Zod and React Hook Form, you can easily set up form validation\nin your React applications. For more advanced features, check out their\n",e(s.a,{href:"https://www.react-hook-form.com/get-started",children:"documentation"}),". Thanks for\nreading!"]})]})}return{default:function(l={}){const{wrapper:n}=l.components||{};return n?e(n,{...l,children:e(_createMdxContent,{...l})}):_createMdxContent(l)}};

Sr. Frontend Developer based in Guatemala

Recent posts

Higher Order Components (HOCs) in React

Using Zod with react-hook-form and TypeScript in React

How I built my blog