Pipeline Validasi useFormState React: Menguasai Validasi Formulir Multi-Tahap

Membangun formulir kompleks dengan validasi yang kuat adalah tantangan umum dalam pengembangan web modern. Hook useFormState dari React menawarkan cara yang kuat dan fleksibel untuk mengelola state dan validasi formulir, memungkinkan pembuatan pipeline validasi multi-tahap yang canggih. Panduan komprehensif ini akan memandu Anda melalui prosesnya, mulai dari memahami dasar-dasarnya hingga mengimplementasikan strategi validasi asinkron tingkat lanjut.

Mengapa Validasi Formulir Multi-Tahap?

Validasi formulir tradisional satu tahap bisa menjadi rumit dan tidak efisien, terutama saat menangani formulir yang berisi banyak field atau dependensi yang kompleks. Validasi multi-tahap memungkinkan Anda untuk:

• Meningkatkan Pengalaman Pengguna: Memberikan umpan balik langsung pada bagian formulir tertentu, membimbing pengguna melalui proses pengisian dengan lebih efektif.
• Meningkatkan Kinerja: Menghindari pemeriksaan validasi yang tidak perlu pada seluruh formulir, mengoptimalkan kinerja, terutama untuk formulir besar.
• Meningkatkan Keterpeliharaan Kode: Memecah logika validasi menjadi unit-unit yang lebih kecil dan mudah dikelola, membuat kode lebih mudah dipahami, diuji, dan dipelihara.

Memahami useFormState

Hook useFormState (sering tersedia di pustaka seperti react-use atau implementasi kustom) menyediakan cara untuk mengelola state formulir, error validasi, dan penanganan pengiriman. Fungsionalitas intinya meliputi:

• Manajemen State: Menyimpan nilai saat ini dari field formulir.
• Validasi: Menjalankan aturan validasi terhadap nilai formulir.
• Pelacakan Error: Melacak error validasi yang terkait dengan setiap field.
• Penanganan Pengiriman: Menyediakan mekanisme untuk mengirimkan formulir dan menangani hasil pengiriman.

Membangun Pipeline Validasi Dasar

Mari kita mulai dengan contoh sederhana dari formulir dua tahap: informasi pribadi (nama, email) dan informasi alamat (jalan, kota, negara).

Langkah 1: Definisikan State Formulir

Pertama, kita definisikan state awal dari formulir kita, yang mencakup semua field:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Langkah 2: Buat Aturan Validasi

Selanjutnya, kita definisikan aturan validasi kita. Untuk contoh ini, mari kita wajibkan semua field tidak boleh kosong dan pastikan email dalam format yang valid.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Kolom ini wajib diisi.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Format email tidak valid.';
  }

  return null; // Tidak ada error
};

Langkah 3: Implementasikan Hook useFormState

Sekarang, mari kita integrasikan aturan validasi ke dalam komponen React kita menggunakan hook useFormState (hipotetis):

import React, { useState } from 'react';

// Mengasumsikan implementasi kustom atau pustaka seperti react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Validasi saat ada perubahan untuk UX yang lebih baik (opsional)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); //Gabungkan dengan error yang sudah ada
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Kirim formulir
      console.log('Formulir terkirim:', values);
      alert('Formulir terkirim!'); //Ganti dengan logika pengiriman yang sebenarnya
    } else {
      console.log('Formulir memiliki error, harap perbaiki.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Informasi Pribadi
          
            Nama Depan:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Nama Belakang:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            Email:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Informasi Alamat
          
            Jalan:
            
            {errors.street && {errors.street}}
          
          

          
            Kota:
            
            {errors.city && {errors.city}}
          
          

          
            Negara:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Sebelumnya}
        {currentStage < 2 && Berikutnya}
        {currentStage === 2 && Kirim}
      
    
  );
};

export default MyForm;

Langkah 4: Implementasikan Navigasi Tahap

Gunakan variabel state untuk mengelola tahap formulir saat ini dan merender bagian formulir yang sesuai berdasarkan tahap saat ini.

Teknik Validasi Tingkat Lanjut

Validasi Asinkron

Terkadang, validasi memerlukan interaksi dengan server, seperti memeriksa apakah nama pengguna tersedia. Ini memerlukan validasi asinkron. Berikut cara mengintegrasikannya:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Nama pengguna tersedia
    } else {
      return 'Nama pengguna sudah digunakan.';
    }
  } catch (error) {
    console.error('Error saat memeriksa nama pengguna:', error);
    return 'Error saat memeriksa nama pengguna. Silakan coba lagi.'; // Tangani error jaringan dengan baik
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Kirim formulir
        console.log('Formulir terkirim:', values);
        alert('Formulir terkirim!'); //Ganti dengan logika pengiriman yang sebenarnya
      } else {
        console.log('Formulir memiliki error, harap perbaiki.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //Opsional: tampilkan pesan loading selama validasi
  };
};

Contoh ini menggabungkan fungsi validateUsername yang membuat panggilan API untuk memeriksa ketersediaan nama pengguna. Pastikan Anda menangani potensi error jaringan dan memberikan umpan balik yang sesuai kepada pengguna.

Validasi Kondisional

Beberapa field mungkin hanya memerlukan validasi berdasarkan nilai dari field lain. Misalnya, field "Situs Web Perusahaan" mungkin hanya diwajibkan jika pengguna menunjukkan bahwa mereka bekerja. Implementasikan validasi kondisional di dalam fungsi validasi Anda:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Situs web perusahaan wajib diisi jika Anda bekerja.';
  }
  return validateField(fieldName, value); // Delegasikan ke validasi dasar
};

Aturan Validasi Dinamis

Terkadang, aturan validasi itu sendiri perlu dinamis, berdasarkan faktor eksternal atau data. Anda dapat mencapai ini dengan meneruskan aturan validasi dinamis sebagai argumen ke fungsi validasi Anda:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Kolom ini harus kurang dari ${rules[fieldName].maxLength} karakter.`;
  }
  return validateField(fieldName, value); // Delegasikan ke validasi dasar
};

Penanganan Error dan Pengalaman Pengguna

Penanganan error yang efektif sangat penting untuk pengalaman pengguna yang positif. Pertimbangkan hal berikut:

• Tampilkan Error dengan Jelas: Posisikan pesan error di dekat field input yang sesuai. Gunakan bahasa yang jelas dan ringkas.
• Validasi Real-Time: Validasi field saat pengguna mengetik, memberikan umpan balik langsung. Perhatikan implikasi kinerja; lakukan debounce atau throttle pada panggilan validasi jika perlu.
• Fokus pada Error: Setelah pengiriman, fokuskan perhatian pengguna pada field pertama yang memiliki error.
• Aksesibilitas: Pastikan pesan error dapat diakses oleh pengguna dengan disabilitas, menggunakan atribut ARIA dan HTML semantik.
• Internasionalisasi (i18n): Terapkan internasionalisasi yang tepat untuk menampilkan pesan error dalam bahasa pilihan pengguna. Layanan seperti i18next atau API Intl JavaScript bawaan dapat membantu.

Praktik Terbaik untuk Validasi Formulir Multi-Tahap

• Jaga Aturan Validasi Tetap Ringkas: Pecah logika validasi yang kompleks menjadi fungsi-fungsi yang lebih kecil dan dapat digunakan kembali.
• Uji Secara Menyeluruh: Tulis unit test untuk memastikan akurasi dan keandalan aturan validasi Anda.
• Gunakan Pustaka Validasi: Pertimbangkan untuk menggunakan pustaka validasi khusus (misalnya, Yup, Zod) untuk menyederhanakan proses dan meningkatkan kualitas kode. Pustaka ini sering menyediakan validasi berbasis skema, membuatnya lebih mudah untuk mendefinisikan dan mengelola aturan validasi yang kompleks.
• Optimalkan Kinerja: Hindari pemeriksaan validasi yang tidak perlu, terutama selama validasi real-time. Gunakan teknik memoization untuk menyimpan hasil validasi dalam cache.
• Berikan Instruksi yang Jelas: Bimbing pengguna melalui proses pengisian formulir dengan instruksi yang jelas dan petunjuk yang membantu.
• Pertimbangkan Progressive Disclosure: Tampilkan hanya field yang relevan untuk setiap tahap, menyederhanakan formulir dan mengurangi beban kognitif.

Pustaka dan Pendekatan Alternatif

Meskipun panduan ini berfokus pada hook useFormState kustom, ada beberapa pustaka formulir unggulan yang menyediakan fungsionalitas serupa, seringkali dengan fitur tambahan dan optimasi kinerja. Beberapa alternatif populer meliputi:

• Formik: Pustaka yang banyak digunakan untuk mengelola state dan validasi formulir di React. Ini menawarkan pendekatan deklaratif untuk penanganan formulir dan mendukung berbagai strategi validasi.
• React Hook Form: Pustaka yang berfokus pada kinerja yang memanfaatkan komponen tak terkontrol dan API ref React untuk meminimalkan render ulang. Ini memberikan kinerja yang sangat baik untuk formulir besar dan kompleks.
• Final Form: Pustaka serbaguna yang mendukung berbagai kerangka kerja UI dan pustaka validasi. Ini menawarkan API yang fleksibel dan dapat diperluas untuk menyesuaikan perilaku formulir.

Memilih pustaka yang tepat tergantung pada kebutuhan dan preferensi spesifik Anda. Pertimbangkan faktor-faktor seperti kinerja, kemudahan penggunaan, dan set fitur saat membuat keputusan.

Pertimbangan Internasional

Saat membangun formulir untuk audiens global, penting untuk mempertimbangkan internasionalisasi dan lokalisasi. Berikut adalah beberapa aspek kunci:

• Format Tanggal dan Waktu: Gunakan format tanggal dan waktu yang spesifik untuk lokal guna memastikan konsistensi dan menghindari kebingungan.
• Format Angka: Gunakan format angka yang spesifik untuk lokal, termasuk simbol mata uang dan pemisah desimal.
• Format Alamat: Sesuaikan field alamat dengan format negara yang berbeda. Beberapa negara mungkin memerlukan kode pos sebelum kota, sementara yang lain mungkin tidak memiliki kode pos sama sekali.
• Validasi Nomor Telepon: Gunakan pustaka validasi nomor telepon yang mendukung format nomor telepon internasional.
• Pengodean Karakter: Pastikan formulir Anda menangani set karakter yang berbeda dengan benar, termasuk Unicode dan karakter non-Latin lainnya.
• Tata Letak Kanan-ke-Kiri (RTL): Dukung bahasa RTL seperti Arab dan Ibrani dengan menyesuaikan tata letak formulir.

Dengan mempertimbangkan aspek-aspek internasional ini, Anda dapat membuat formulir yang dapat diakses dan ramah pengguna untuk audiens global.

Kesimpulan

Mengimplementasikan pipeline validasi formulir multi-tahap dengan hook useFormState React (atau pustaka alternatif) dapat secara signifikan meningkatkan pengalaman pengguna, meningkatkan kinerja, dan meningkatkan keterpeliharaan kode. Dengan memahami konsep inti dan menerapkan praktik terbaik yang diuraikan dalam panduan ini, Anda dapat membangun formulir yang kuat dan skalabel yang memenuhi tuntutan aplikasi web modern.

Ingatlah untuk memprioritaskan pengalaman pengguna, menguji secara menyeluruh, dan menyesuaikan strategi validasi Anda dengan persyaratan spesifik proyek Anda. Dengan perencanaan dan eksekusi yang cermat, Anda dapat membuat formulir yang fungsional dan menyenangkan untuk digunakan.

Pembelajaran Lebih Lanjut

• Dokumentasi Resmi React
• Dokumentasi Formik
• Dokumentasi React Hook Form