validasi form react

⚡ Seri Belajar React — Artikel 8 dari 16

Bikin Form yang Proper: Controlled Component dan Validasi Input di React

Capek form-mu diam aja waktu dikasih input asal-asalan? Saatnya kenalan dengan controlled component dan sistem validasi React yang bikin form kamu sekelas produk profesional.

#ControlledComponent #ValidasiInput #ReactForm #BelajarReact

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2026

Pernah nggak kamu nemu form di website yang kalau diisi nama pakai angka, atau email tanpa "@", tetap bisa submit? Bikin frustrasi kan? Nah, masalah klasik ini adalah tanda bahwa developer-nya belum kenalan sama controlled component form validasi React. Di artikel ke-8 dari Seri Belajar React: React from Zero to Zorro ini, kita bakal bedah tuntas cara bikin form yang beneran ngejaga data kamu — bukan cuma tampang-tampangan doang. Kalau kamu udah baca artikel sebelumnya soal Fetch API dan Axios, sekarang saatnya data yang kamu ambil dari internet itu diproses dengan form yang bener!

Apa Itu Controlled Component? Analogi Kasir vs Self-Service

Bayangkan dua skenario belanja di supermarket. Pertama, kamu pakai mesin self-checkout: kamu scan sendiri, masukkin barang sendiri, dan kasir baru tahu totalnya setelah kamu selesai — tidak ada kontrol di tengah proses. Kedua, kamu antri di kasir manusia: setiap barang yang kamu taruh di ban berjalan langsung dicatat sistem, kalau ada yang mencurigakan kasir bisa langsung stop.

Nah, controlled component di React itu seperti kasir manusia. Setiap ketukan karakter di input field langsung "dilaporkan" ke React state. React yang pegang kendali penuh atas nilai form — bukan DOM browser. Ini berbeda dengan uncontrolled component yang membiarkan DOM mengatur nilainya sendiri (kayak self-checkout tadi).

📐 Definisi Kunci

Controlled Component adalah elemen form HTML (input, textarea, select) yang nilainya dikendalikan sepenuhnya oleh React state. Setiap perubahan nilai dipicu oleh event handler yang memperbarui state, dan React me-render ulang komponen dengan nilai terbaru.

nilai input = state React → onChange → setState → re-render

ControlledInput.jsx

import { useState } from 'react';

function NamaForm() {
  const [nama, setNama] = useState('');

  return (
    <div>
      <input
        type="text"
        value={nama}          // ← nilai dari state
        onChange={e => setNama(e.target.value)}
        placeholder="Masukkan namamu"
      />
      <p>Halo, {nama || 'tamu'}!</p>
    </div>
  );
}

💡 Tips Penting

Selalu pasangkan atribut value dengan onChange. Kalau kamu kasih value tanpa onChange, React akan membekukan input-mu — tidak bisa diketik sama sekali!

Membangun Form Lengkap dengan Controlled Component di React

Sekarang mari kita naik level. Kita bangun form registrasi sederhana dengan beberapa field: nama, email, dan password. Ikuti langkah-langkahnya satu per satu!

1

Siapkan State untuk Semua Field

Daripada bikin useState satu-satu, lebih rapi pakai satu objek state. Ini pattern yang sering dipakai di proyek nyata.

formState.jsx

const [formData, setFormData] = useState({
  nama: '',
  email: '',
  password: '',
});

2

Buat Universal Change Handler

Satu handler untuk semua field — manfaatkan atribut name pada elemen HTML.

handler.jsx

const handleChange = (e) => {
  const { name, value } = e.target;
  setFormData(prev => ({
    ...prev,
    [name]: value  // computed property key!
  }));
};

3

Hubungkan ke JSX Form

FormRegistrasi.jsx

<form onSubmit={handleSubmit}>
  <input
    name="nama"
    value={formData.nama}
    onChange={handleChange}
    placeholder="Nama Lengkap"
  />
  <input
    name="email"
    type="email"
    value={formData.email}
    onChange={handleChange}
    placeholder="Email"
  />
  <input
    name="password"
    type="password"
    value={formData.password}
    onChange={handleChange}
    placeholder="Password"
  />
  <button type="submit">Daftar</button>
</form>

🔥 Fakta Menarik

Pola [name]: value menggunakan Computed Property Names dari ES6. Ini salah satu alasan kenapa React developer wajib paham JavaScript modern — bukan cuma hafal syntax React-nya aja!

Validasi Input: Penjaga Gerbang Data di React

Form tanpa validasi itu seperti kasir supermarket yang nggak pernah scan barcode — siapapun bisa lolos dengan apa saja. Validasi di React bisa dilakukan di dua tempat: saat onChange (real-time) dan saat onSubmit (final check). Kita pakai keduanya!

validasi.jsx — Sistem validasi lengkap

import { useState } from 'react';

function FormDenganValidasi() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});

  // Fungsi validasi terpisah — clean & reusable
  const validate = (data) => {
    const errs = {};

    if (!data.email)
      errs.email = 'Email wajib diisi!';
    else if (!/\S+@\S+\.\S+/.test(data.email))
      errs.email = 'Format email tidak valid!';

    if (!data.password)
      errs.password = 'Password wajib diisi!';
    else if (data.password.length < 8)
      errs.password = 'Password minimal 8 karakter!';

    return errs;
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    const updated = { ...formData, [name]: value };
    setFormData(updated);
    // Validasi real-time saat user mengetik
    setErrors(validate(updated));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate(formData);
    if (Object.keys(errs).length > 0) {
      setErrors(errs);
      return;  // stop jika ada error
    }
    console.log('Form valid! Kirim ke server:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={formData.email} onChange={handleChange} />
      {errors.email && <span style={{color:'red'}}>{errors.email}</span>}

      <input name="password" type="password"
             value={formData.password} onChange={handleChange} />
      {errors.password && <span style={{color:'red'}}>{errors.password}</span>}

      <button type="submit">Login</button>
    </form>
  );
}

⚠️ Perhatian

Jangan lupakan e.preventDefault() di dalam handleSubmit! Tanpanya, form akan me-reload halaman setiap kali disubmit — dan semua state-mu akan hilang.

Controlled vs Uncontrolled: Pilih yang Mana untuk Form Validasi React?

React punya dua pendekatan untuk mengelola form. Mari kita bandingkan keduanya secara head-to-head supaya kamu bisa membuat keputusan yang tepat di proyek nyata.

Aspek	✅ Controlled Component	⚠️ Uncontrolled Component
Kontrol nilai	React state (penuh)	DOM browser (ref)
Validasi real-time	✔ Mudah & natural	✘ Butuh kerja ekstra
Cocok untuk	Form kompleks, validasi ketat	Form sederhana, file upload
Boilerplate kode	Lebih banyak	Lebih sedikit
Rekomendasi React docs	⭐ Direkomendasikan	Situasional

🔍 Analisis Mendalam

Kapan pakai uncontrolled? Satu-satunya kasus yang benar-benar butuh uncontrolled adalah elemen <input type="file"> — karena nilainya read-only di DOM dan tidak bisa dikendalikan oleh React state. Untuk semua kasus lain, controlled component adalah pilihan yang lebih aman.

Di dunia nyata, banyak developer menggunakan library seperti React Hook Form atau Formik yang mengabstraksikan boilerplate controlled component. Tapi sebelum pakai library, memahami cara kerjanya dari bawah adalah fondasi yang wajib!

⚡ Insight Penting

Validasi di client-side (React) berfungsi untuk memberikan feedback cepat ke user. Tapi ingat — validasi di sisi server tetap wajib! User bisa menonaktifkan JavaScript atau manipulasi request secara langsung. Dua lapis validasi = form yang beneran aman.

✅ Kesimpulan

Form yang Proper = Controlled Component + Validasi Input React yang Solid

Kita sudah menempuh perjalanan panjang dari kasir supermarket sampai ke kode React! Berikut poin-poin yang wajib kamu bawa pulang:

• Controlled component berarti React state yang mengontrol nilai form, bukan DOM — dengan pasangan wajib value + onChange.
• Gunakan satu objek state + computed property key untuk mengelola banyak field sekaligus secara efisien.
• Validasi dilakukan di dua titik: real-time saat onChange dan final check saat onSubmit.
• Jangan lupa e.preventDefault() dan validasi server-side sebagai lapis keamanan kedua.

🙋 Pertanyaan untuk kamu: Sudah coba bikin form dengan controlled component form validasi React sendiri? Share pengalaman atau pertanyaanmu di kolom komentar! Dan kalau artikel ini membantu, jangan ragu untuk share ke teman-teman yang lagi belajar React. Belajar bareng itu lebih seru! 🚀

📚 Lihat Semua Artikel Seri Ini

🏷️ Tags Artikel

#BelajarReact #ZeroToZorro #ControlledComponent #ValidasiInput #ReactForm #ReactJS #WebDevelopment

📚

Seri Lengkap

React from Zero to Zorro

Artikel ini adalah bagian dari seri 16 artikel belajar React dari nol sampai mahir. Kamu bisa mengikuti seluruh seri dari awal melalui link di bawah!

🗂️ Lihat Daftar Isi Seri Lengkap

🔗 Navigasi Artikel

← Artikel Sebelumnya

Ambil Data dari Internet: Praktikum Fetch API dan Axios di React

← Baca Artikel 7

Artikel Selanjutnya →

Pindah-Pindah Halaman: Praktikum React Router DOM dari Nol

Baca Artikel 9 →