Best way to Validate and Submit Forms in Next.js15 using Zod, Prisma, Hooks, Server Actions

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ต.ค. 2024
  • Build and validate forms like a senior developers with the help of zod, prisma, server actions and hooks. You will learn, how to create custom zod validation object that can be used to validate form both on client side and on server side. I will use prisma orm from db operation and mongodb as database. For performing db operations, will use server action and form hooks to store form data in database.
    00:05 Next.js forms intro
    01:45 install packages
    02:50 Configure layout and pages
    04:15 Add form ui
    06:20 Configure prisma and db schema
    10:00 Validate form on client side
    15:30 Add zod validations
    21:50 Show form validation errors
    27:45 Add server action and hooks
    32:35 Validate form on server side
    35:30 Store form data in database
    40:35 Add submit pending state
    #zod #formvalidation #nextjs15 #prismaforms #mongodb
    Follow Whatsapp Channel:
    whatsapp.com/c...
    React tutorials:
    • React.js Tutorials
    JavaScript Tutorials and Projects:
    • JavaScript Tutorial an...
    Angular Tutorials:
    • Angular 16 Life Cycle ...
    Docker Tutorials & CI/CD:
    • Docker Tutorials & CI/CD
    Angular 16 Crash Course For Beginners:
    • Angular 16 Crash Course
    Tech Tutorials - Random:
    • Postman Tutorial - Tes...
    Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
    Next.js 14 Tutorials:
    • Next.js 14 Tutorials -...
    Node Express MongoDB Bootcamp: • Build REST API with No...
    ChatGPT Tutorials: • ChatGPT
    Join our facebook group:
    / 996305460498149
    Github repo (Give Star):
    github.com/uma...
    Contact us for development services:
    / umair-jameel-24aa5368

ความคิดเห็น • 5

  • @ProgrammingwithUmair321
    @ProgrammingwithUmair321  2 หลายเดือนก่อน +1

    In case someone don't know how to create mongodb url on atlas: th-cam.com/video/sQ3fPyko6o8/w-d-xo.html

  • @mehmethanifierenler3612
    @mehmethanifierenler3612 หลายเดือนก่อน

    thanks

  • @k303k
    @k303k 2 หลายเดือนก่อน

    HI sir. Your channel is the top tier. Can i request Nextjs with jest tutorial too?

  • @lottola5285
    @lottola5285 2 หลายเดือนก่อน

    why you skip the part of configuring the mongo atlas. I'm stuck and unable to follow along. Any solutions?

    • @ProgrammingwithUmair321
      @ProgrammingwithUmair321  2 หลายเดือนก่อน

      Create mongodb url following this: th-cam.com/video/sQ3fPyko6o8/w-d-xo.html