React useFormState validacijski cjevovod: Ovladavanje višefaznom validacijom obrazaca

Izgradnja složenih obrazaca s robusnom validacijom čest je izazov u modernom web razvoju. Reactov useFormState hook nudi moćan i fleksibilan način za upravljanje stanjem obrasca i validacijom, omogućujući stvaranje sofisticiranih višefaznih validacijskih cjevovoda. Ovaj sveobuhvatni vodič provest će vas kroz cijeli proces, od razumijevanja osnova do implementacije naprednih strategija asinkrone validacije.

Zašto višefazna validacija obrazaca?

Tradicionalna, jednofazna validacija obrazaca može postati glomazna i neučinkovita, osobito kod obrazaca s brojnim poljima ili složenim ovisnostima. Višefazna validacija omogućuje vam da:

• Poboljšate korisničko iskustvo: Pružite trenutne povratne informacije o određenim dijelovima obrasca, učinkovitije vodeći korisnike kroz proces ispunjavanja.
• Povećate performanse: Izbjegnite nepotrebne provjere valjanosti na cijelom obrascu, optimizirajući performanse, osobito za velike obrasce.
• Povećate održivost koda: Razbijte logiku validacije na manje, upravljive jedinice, čineći kod lakšim za razumijevanje, testiranje i održavanje.

Razumijevanje useFormState hooka

useFormState hook (često dostupan u bibliotekama poput react-use ili prilagođenim implementacijama) pruža način za upravljanje stanjem obrasca, greškama validacije i rukovanjem slanjem. Njegova osnovna funkcionalnost uključuje:

• Upravljanje stanjem: Pohranjuje trenutne vrijednosti polja obrasca.
• Validacija: Izvršava pravila validacije nad vrijednostima obrasca.
• Praćenje grešaka: Prati greške validacije povezane sa svakim poljem.
• Rukovanje slanjem: Pruža mehanizme za slanje obrasca i obradu rezultata slanja.

Izgradnja osnovnog validacijskog cjevovoda

Krenimo s jednostavnim primjerom obrasca u dvije faze: osobni podaci (ime, e-mail) i podaci o adresi (ulica, grad, država).

Korak 1: Definiranje stanja obrasca

Prvo, definiramo početno stanje našeg obrasca, koje obuhvaća sva polja:

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

Korak 2: Stvaranje pravila validacije

Zatim, definiramo naša pravila validacije. Za ovaj primjer, zahtijevajmo da sva polja budu popunjena i osigurajmo da je e-mail u ispravnom formatu.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Ovo polje je obavezno.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Neispravan format e-mail adrese.';
  }

  return null; // Nema greške
};

Korak 3: Implementacija useFormState hooka

Sada, integrirajmo pravila validacije u našu React komponentu koristeći (hipotetski) useFormState hook:

import React, { useState } from 'react';

// Pretpostavljamo prilagođenu implementaciju ili biblioteku poput 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 });

    // Validacija pri promjeni za bolje korisničko iskustvo (opcionalno)
    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}); // Spoji s postojećim greškama
    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) {
      // Pošalji obrazac
      console.log('Obrazac poslan:', values);
      alert('Obrazac je poslan!'); // Zamijenite stvarnom logikom slanja
    } else {
      console.log('Obrazac ima grešaka, molimo ispravite ih.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Osobni podaci
          
            Ime:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Prezime:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            E-mail:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Podaci o adresi
          
            Ulica:
            
            {errors.street && {errors.street}}
          
          

          
            Grad:
            
            {errors.city && {errors.city}}
          
          

          
            Država:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Prethodno}
        {currentStage < 2 && Dalje}
        {currentStage === 2 && Pošalji}
      
    
  );
};

export default MyForm;

Korak 4: Implementacija navigacije kroz faze

Koristite varijable stanja za upravljanje trenutnom fazom obrasca i renderiranje odgovarajućeg dijela obrasca na temelju trenutne faze.

Napredne tehnike validacije

Asinkrona validacija

Ponekad validacija zahtijeva interakciju s poslužiteljem, kao što je provjera je li korisničko ime dostupno. To zahtijeva asinkronu validaciju. Evo kako je integrirati:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Korisničko ime je dostupno
    } else {
      return 'Korisničko ime je već zauzeto.';
    }
  } catch (error) {
    console.error('Greška pri provjeri korisničkog imena:', error);
    return 'Greška pri provjeri korisničkog imena. Molimo pokušajte ponovno.'; // Elegantno rukujte mrežnim greškama
  }
};

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) {
        // Pošalji obrazac
        console.log('Obrazac poslan:', values);
        alert('Obrazac je poslan!'); // Zamijenite stvarnom logikom slanja
      } else {
        console.log('Obrazac ima grešaka, molimo ispravite ih.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Opcionalno: prikaži poruku o učitavanju tijekom validacije
  };
};

Ovaj primjer uključuje funkciju validateUsername koja vrši API poziv za provjeru dostupnosti korisničkog imena. Osigurajte da rukujete potencijalnim mrežnim greškama i pružite odgovarajuće povratne informacije korisniku.

Uvjetna validacija

Neka polja mogu zahtijevati validaciju samo na temelju vrijednosti drugih polja. Na primjer, polje "Web stranica tvrtke" može biti obavezno samo ako korisnik navede da je zaposlen. Implementirajte uvjetnu validaciju unutar svojih validacijskih funkcija:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Web stranica tvrtke je obavezna ako ste zaposleni.';
  }
  return validateField(fieldName, value); // Delegirajte osnovnoj validaciji
};

Dinamička pravila validacije

Ponekad sama pravila validacije moraju biti dinamična, ovisno o vanjskim čimbenicima ili podacima. To možete postići prosljeđivanjem dinamičkih pravila validacije kao argumenata vašim validacijskim funkcijama:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Ovo polje mora imati manje od ${rules[fieldName].maxLength} znakova.`;
  }
  return validateField(fieldName, value); // Delegirajte osnovnoj validaciji
};

Rukovanje greškama i korisničko iskustvo

Učinkovito rukovanje greškama ključno je za pozitivno korisničko iskustvo. Razmotrite sljedeće:

• Jasan prikaz grešaka: Postavite poruke o greškama blizu odgovarajućih polja za unos. Koristite jasan i sažet jezik.
• Validacija u stvarnom vremenu: Validirajte polja dok korisnik tipka, pružajući trenutne povratne informacije. Pazite na implikacije na performanse; koristite debounce ili throttle za validacijske pozive ako je potrebno.
• Fokus na greške: Nakon slanja, usmjerite pažnju korisnika na prvo polje s greškom.
• Pristupačnost: Osigurajte da su poruke o greškama dostupne korisnicima s invaliditetom, koristeći ARIA atribute i semantički HTML.
• Internacionalizacija (i18n): Implementirajte ispravnu internacionalizaciju za prikaz poruka o greškama na korisnikovom preferiranom jeziku. Usluge poput i18next ili nativnog JavaScript Intl API-ja mogu pomoći.

Najbolje prakse za višefaznu validaciju obrazaca

• Neka pravila validacije budu sažeta: Razbijte složenu logiku validacije na manje, ponovno iskoristive funkcije.
• Testirajte temeljito: Napišite jedinične testove kako biste osigurali točnost i pouzdanost vaših pravila validacije.
• Koristite biblioteku za validaciju: Razmislite o korištenju namjenske biblioteke za validaciju (npr. Yup, Zod) kako biste pojednostavili proces i poboljšali kvalitetu koda. Ove biblioteke često pružaju validaciju temeljenu na shemi, što olakšava definiranje i upravljanje složenim pravilima validacije.
• Optimizirajte performanse: Izbjegavajte nepotrebne provjere valjanosti, osobito tijekom validacije u stvarnom vremenu. Koristite tehnike memoizacije za keširanje rezultata validacije.
• Pružite jasne upute: Vodite korisnike kroz proces ispunjavanja obrasca s jasnim uputama i korisnim savjetima.
• Razmotrite progresivno otkrivanje: Prikažite samo relevantna polja za svaku fazu, pojednostavljujući obrazac i smanjujući kognitivno opterećenje.

Alternativne biblioteke i pristupi

Iako se ovaj vodič usredotočuje na prilagođeni useFormState hook, postoji nekoliko izvrsnih biblioteka za obrasce koje pružaju sličnu funkcionalnost, često s dodatnim značajkama i optimizacijama performansi. Neke popularne alternative uključuju:

• Formik: Široko korištena biblioteka za upravljanje stanjem obrazaca i validacijom u Reactu. Nudi deklarativni pristup rukovanju obrascima i podržava različite strategije validacije.
• React Hook Form: Biblioteka usmjerena na performanse koja koristi nekontrolirane komponente i Reactov ref API kako bi minimizirala ponovna renderiranja. Pruža izvrsne performanse za velike i složene obrasce.
• Final Form: Svestrana biblioteka koja podržava različite UI okvire i biblioteke za validaciju. Nudi fleksibilan i proširiv API za prilagodbu ponašanja obrazaca.

Odabir prave biblioteke ovisi o vašim specifičnim zahtjevima i preferencijama. Prilikom donošenja odluke uzmite u obzir faktore kao što su performanse, jednostavnost korištenja i skup značajki.

Međunarodna razmatranja

Prilikom izrade obrazaca za globalnu publiku, ključno je uzeti u obzir internacionalizaciju i lokalizaciju. Evo nekih ključnih aspekata:

• Formati datuma i vremena: Koristite formate datuma i vremena specifične za lokalitet kako biste osigurali dosljednost i izbjegli zabunu.
• Formati brojeva: Koristite formate brojeva specifične za lokalitet, uključujući simbole valuta i decimalne separatore.
• Formati adresa: Prilagodite polja adrese različitim formatima zemalja. Neke zemlje mogu zahtijevati poštanske brojeve prije gradova, dok druge možda uopće nemaju poštanske brojeve.
• Validacija telefonskog broja: Koristite biblioteku za validaciju telefonskih brojeva koja podržava međunarodne formate telefonskih brojeva.
• Kodiranje znakova: Osigurajte da vaš obrazac ispravno rukuje različitim skupovima znakova, uključujući Unicode i druge nelatinične znakove.
• Raspored zdesna nalijevo (RTL): Podržite RTL jezike kao što su arapski i hebrejski prilagođavanjem rasporeda obrasca.

Uzimajući u obzir ove međunarodne aspekte, možete stvoriti obrasce koji su pristupačni i jednostavni za korištenje globalnoj publici.

Zaključak

Implementacija višefaznog validacijskog cjevovoda s Reactovim useFormState hookom (ili alternativnim bibliotekama) može značajno poboljšati korisničko iskustvo, povećati performanse i poboljšati održivost koda. Razumijevanjem osnovnih koncepata i primjenom najboljih praksi opisanih u ovom vodiču, možete izgraditi robusne i skalabilne obrasce koji zadovoljavaju zahtjeve modernih web aplikacija.

Ne zaboravite dati prioritet korisničkom iskustvu, temeljito testirati i prilagoditi svoje strategije validacije specifičnim zahtjevima vašeg projekta. Pažljivim planiranjem i izvedbom možete stvoriti obrasce koji su i funkcionalni i ugodni za korištenje.

Dodatni materijali za učenje

• Službena dokumentacija Reacta
• Dokumentacija za Formik
• Dokumentacija za React Hook Form