Advanced · Level 12: Forms, Validation, and Data FetchingAdvanced70 menitBahasa Indonesia

Field Errors

Menghubungkan schema Zod melalui resolver dan menampilkan error yang spesifik dekat dengan field yang perlu diperbaiki.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan peran zodResolver antara schema dan form
Membaca errors dari formState
Menampilkan pesan error dekat dengan field terkait
Menghubungkan input invalid dengan pesan yang jelas

React Hook FormZodResolversForm ErrorsAccessibility

Isi lesson

7 blok

1.
Error harus menyebut apa yang perlu diperbaikiBelum selesaiWajib
2.
Pasang resolver setelah Zod tersediaBelum selesaiWajib
3.
Email field dengan resolver dan error relationshipBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
Jangan membuat error permanen sejak form dibukaBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Error harus menyebut apa yang perlu diperbaiki

Wajib

Pesan umum seperti Data tidak valid membuat user menebak field yang salah. Field error yang baik muncul dekat input terkait, memakai bahasa yang menjelaskan perbaikan, dan punya hubungan yang dapat dibaca teknologi bantu. React Hook Form menyimpan error di formState.errors. zodResolver menerjemahkan hasil profileSchema ke bentuk error yang dipahami React Hook Form.

Resolver tidak membuat aturan baru dan tidak menyimpan data. Ia hanya menghubungkan schema serta form library. Untuk setiap input yang error, gunakan aria-invalid dan aria-describedby yang menunjuk ke pesan. Module berikutnya akan memperdalam UX validasi dan accessible error; di sini fokusnya adalah flow dasar yang jelas untuk satu field.

Bagian ini memengaruhi progres lesson.

Pasang resolver setelah Zod tersedia

Wajib

bash

npm install @hookform/resolvers

Package ini menyediakan adapter seperti zodResolver. Jalankan perintah di project lokal dan pastikan package muncul pada dependencies. FluentStack tidak menjalankan npm install atau resolver di practice workspace.

Bagian ini memengaruhi progres lesson.

Email field dengan resolver dan error relationship

Wajib

tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import {
  profileSchema,
  type ProfileFormValues,
} from "@/lib/validation/profile-schema";

export function ProfileForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ProfileFormValues>({
    resolver: zodResolver(profileSchema),
  });

  return (
    <form onSubmit={handleSubmit(console.log)} noValidate>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        type="email"
        aria-invalid={Boolean(errors.email)}
        aria-describedby={errors.email ? "email-error" : undefined}
        {...register("email")}
      />
      {errors.email?.message ? (
        <p id="email-error" role="alert">
          {errors.email.message}
        </p>
      ) : null}
      <button type="submit">Simpan profile</button>
    </form>
  );
}

errors.email hanya ada ketika schema menolak nilai field. aria-invalid serta aria-describedby membuat input memberi context tambahan saat error terlihat. noValidate menghindari bubble validasi browser yang berbeda-beda agar pesan app menjadi sumber feedback. Ini bukan alasan menghapus label atau type email yang tetap berguna secara semantik.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Render profile field errors

Lengkapi field email dengan resolver, formState errors, atribut aksesibilitas, dan pesan error yang dekat dengan input.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa fungsi zodResolver(profileSchema) pada useForm?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Jangan membuat error permanen sejak form dibuka

Tentukan kapan validation berjalan berdasarkan kebutuhan product. Error yang muncul sebelum user menyentuh field dapat terasa menghukum. Mulai dari behavior default library untuk form sederhana, lalu uji flow yang nyata. Jangan hanya mengandalkan warna merah; teks serta hubungan input dan pesan tetap diperlukan.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Resolver menghubungkan Zod schema dan error format React Hook Form.
formState.errors memberi pesan untuk field yang gagal memenuhi schema.
Pesan perlu dekat dengan field dan menjelaskan perbaikan.
aria-invalid serta aria-describedby menghubungkan input dan error.
Berikutnya, submit state akan memberi feedback saat request berjalan atau gagal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Error harus menyebut apa yang perlu diperbaiki.

Memuat progres Review module