Potok walidacji z React useFormState: Opanowanie wieloetapowej walidacji formularzy

Budowanie złożonych formularzy z solidną walidacją to częste wyzwanie we współczesnym tworzeniu stron internetowych. Hook useFormState w React oferuje potężny i elastyczny sposób zarządzania stanem formularza i walidacją, umożliwiając tworzenie zaawansowanych, wieloetapowych potoków walidacyjnych. Ten kompleksowy przewodnik przeprowadzi Cię przez cały proces, od zrozumienia podstaw po implementację zaawansowanych strategii walidacji asynchronicznej.

Dlaczego wieloetapowa walidacja formularzy?

Tradycyjna, jednoetapowa walidacja formularzy może stać się uciążliwa i nieefektywna, zwłaszcza w przypadku formularzy zawierających liczne pola lub złożone zależności. Wieloetapowa walidacja pozwala na:

• Poprawę doświadczenia użytkownika (UX): Dostarczaj natychmiastowych informacji zwrotnych na temat konkretnych sekcji formularza, skuteczniej prowadząc użytkowników przez proces jego wypełniania.
• Zwiększenie wydajności: Unikaj niepotrzebnych sprawdzeń walidacyjnych całego formularza, optymalizując wydajność, szczególnie w przypadku dużych formularzy.
• Zwiększenie łatwości utrzymania kodu: Podziel logikę walidacji na mniejsze, łatwe do zarządzania jednostki, co sprawia, że kod jest łatwiejszy do zrozumienia, testowania i utrzymania.

Zrozumienie useFormState

Hook useFormState (często dostępny w bibliotekach takich jak react-use lub w niestandardowych implementacjach) zapewnia sposób na zarządzanie stanem formularza, błędami walidacji i obsługą przesyłania. Jego podstawowa funkcjonalność obejmuje:

• Zarządzanie stanem: Przechowuje aktualne wartości pól formularza.
• Walidacja: Wykonuje reguły walidacji na podstawie wartości formularza.
• Śledzenie błędów: Śledzi błędy walidacji powiązane z każdym polem.
• Obsługa przesyłania: Dostarcza mechanizmów do przesyłania formularza i obsługi wyniku tego procesu.

Budowanie podstawowego potoku walidacji

Zacznijmy od prostego przykładu formularza dwuetapowego: dane osobowe (imię, e-mail) i dane adresowe (ulica, miasto, kraj).

Krok 1: Zdefiniuj stan formularza

Najpierw definiujemy początkowy stan naszego formularza, obejmujący wszystkie pola:

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

Krok 2: Stwórz reguły walidacji

Następnie definiujemy nasze reguły walidacji. W tym przykładzie załóżmy, że wszystkie pola muszą być niepuste, a e-mail musi mieć prawidłowy format.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'To pole jest wymagane.';
  }

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

  return null; // Brak błędu
};

Krok 3: Zaimplementuj hook useFormState

Teraz zintegrujmy reguły walidacji z naszym komponentem React, używając (hipotetycznego) hooka useFormState:

import React, { useState } from 'react';

// Zakładając niestandardową implementację lub bibliotekę taką jak 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 });

    // Walidacja przy zmianie dla lepszego UX (opcjonalnie)
    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}); // Połącz z istniejącymi błędami
    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) {
      // Prześlij formularz
      console.log('Formularz przesłany:', values);
      alert('Formularz przesłany!'); // Zastąp rzeczywistą logiką przesyłania
    } else {
      console.log('Formularz zawiera błędy, proszę je poprawić.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Dane osobowe
          
            Imię:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Nazwisko:
            
            {errors.lastName && {errors.lastName}}
          
          

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

        
      )}

      {currentStage === 2 && (
        

          
Dane adresowe
          
            Ulica:
            
            {errors.street && {errors.street}}
          
          

          
            Miasto:
            
            {errors.city && {errors.city}}
          
          

          
            Kraj:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Wstecz}
        {currentStage < 2 && Dalej}
        {currentStage === 2 && Wyślij}
      
    
  );
};

export default MyForm;

Krok 4: Zaimplementuj nawigację między etapami

Użyj zmiennych stanu do zarządzania bieżącym etapem formularza i renderuj odpowiednią sekcję formularza na podstawie aktualnego etapu.

Zaawansowane techniki walidacji

Walidacja asynchroniczna

Czasami walidacja wymaga interakcji z serwerem, na przykład sprawdzenia, czy nazwa użytkownika jest dostępna. Wymaga to walidacji asynchronicznej. Oto jak ją zintegrować:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Nazwa użytkownika jest dostępna
    } else {
      return 'Nazwa użytkownika jest już zajęta.';
    }
  } catch (error) {
    console.error('Błąd podczas sprawdzania nazwy użytkownika:', error);
    return 'Błąd podczas sprawdzania nazwy użytkownika. Proszę spróbować ponownie.'; // Obsłuż błędy sieciowe w elegancki sposób
  }
};

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) {
        // Prześlij formularz
        console.log('Formularz przesłany:', values);
        alert('Formularz przesłany!'); // Zastąp rzeczywistą logiką przesyłania
      } else {
        console.log('Formularz zawiera błędy, proszę je poprawić.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Opcjonalnie: wyświetl komunikat o ładowaniu podczas walidacji
  };
};

Ten przykład zawiera funkcję validateUsername, która wykonuje wywołanie API w celu sprawdzenia dostępności nazwy użytkownika. Upewnij się, że obsługujesz potencjalne błędy sieciowe i dostarczasz użytkownikowi odpowiednich informacji zwrotnych.

Walidacja warunkowa

Niektóre pola mogą wymagać walidacji tylko w zależności od wartości innych pól. Na przykład pole "Strona internetowa firmy" może być wymagane tylko wtedy, gdy użytkownik wskaże, że jest zatrudniony. Zaimplementuj walidację warunkową w swoich funkcjach walidacyjnych:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Strona internetowa firmy jest wymagana, jeśli jesteś zatrudniony.';
  }
  return validateField(fieldName, value); // Deleguj do podstawowej walidacji
};

Dynamiczne reguły walidacji

Czasami same reguły walidacji muszą być dynamiczne, oparte na zewnętrznych czynnikach lub danych. Można to osiągnąć, przekazując dynamiczne reguły walidacji jako argumenty do funkcji walidacyjnych:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `To pole musi mieć mniej niż ${rules[fieldName].maxLength} znaków.`;
  }
  return validateField(fieldName, value); // Deleguj do podstawowej walidacji
};

Obsługa błędów i doświadczenie użytkownika

Skuteczna obsługa błędów jest kluczowa dla pozytywnego doświadczenia użytkownika. Weź pod uwagę następujące kwestie:

• Wyraźnie wyświetlaj błędy: Umieszczaj komunikaty o błędach w pobliżu odpowiednich pól wejściowych. Używaj jasnego i zwięzłego języka.
• Walidacja w czasie rzeczywistym: Waliduj pola w trakcie pisania przez użytkownika, dostarczając natychmiastowych informacji zwrotnych. Pamiętaj o implikacjach wydajnościowych; w razie potrzeby użyj debouncingu lub throttlingu wywołań walidacji.
• Skupienie na błędach: Po przesłaniu formularza, skup uwagę użytkownika na pierwszym polu z błędem.
• Dostępność: Upewnij się, że komunikaty o błędach są dostępne dla użytkowników z niepełnosprawnościami, używając atrybutów ARIA i semantycznego HTML.
• Internacjonalizacja (i18n): Zaimplementuj odpowiednią internacjonalizację, aby wyświetlać komunikaty o błędach w preferowanym języku użytkownika. Pomocne mogą być usługi takie jak i18next lub natywne API Intl w JavaScript.

Dobre praktyki w wieloetapowej walidacji formularzy

• Utrzymuj zwięzłość reguł walidacji: Dziel złożoną logikę walidacji na mniejsze, reużywalne funkcje.
• Testuj dokładnie: Pisz testy jednostkowe, aby zapewnić dokładność i niezawodność swoich reguł walidacji.
• Używaj biblioteki do walidacji: Rozważ użycie dedykowanej biblioteki do walidacji (np. Yup, Zod), aby uprościć proces i poprawić jakość kodu. Biblioteki te często oferują walidację opartą na schematach, co ułatwia definiowanie i zarządzanie złożonymi regułami.
• Optymalizuj wydajność: Unikaj niepotrzebnych sprawdzeń walidacyjnych, zwłaszcza podczas walidacji w czasie rzeczywistym. Używaj technik memoizacji do buforowania wyników walidacji.
• Dostarczaj jasnych instrukcji: Prowadź użytkowników przez proces wypełniania formularza za pomocą jasnych instrukcji i pomocnych wskazówek.
• Rozważ stopniowe ujawnianie: Pokazuj tylko odpowiednie pola dla każdego etapu, upraszczając formularz i zmniejszając obciążenie poznawcze.

Alternatywne biblioteki i podejścia

Chociaż ten przewodnik koncentruje się na niestandardowym hooku useFormState, istnieje kilka doskonałych bibliotek do obsługi formularzy, które oferują podobną funkcjonalność, często z dodatkowymi funkcjami i optymalizacjami wydajności. Do popularnych alternatyw należą:

• Formik: Szeroko stosowana biblioteka do zarządzania stanem formularza i walidacją w React. Oferuje deklaratywne podejście do obsługi formularzy i wspiera różne strategie walidacji.
• React Hook Form: Biblioteka skoncentrowana na wydajności, która wykorzystuje komponenty niekontrolowane i API ref w React, aby zminimalizować ponowne renderowanie. Zapewnia doskonałą wydajność dla dużych i złożonych formularzy.
• Final Form: Wszechstronna biblioteka, która wspiera różne frameworki UI i biblioteki walidacyjne. Oferuje elastyczne i rozszerzalne API do dostosowywania zachowania formularza.

Wybór odpowiedniej biblioteki zależy od Twoich konkretnych wymagań i preferencji. Podejmując decyzję, weź pod uwagę takie czynniki jak wydajność, łatwość użycia i zestaw funkcji.

Kwestie międzynarodowe

Budując formularze dla globalnej publiczności, kluczowe jest uwzględnienie internacjonalizacji i lokalizacji. Oto kilka kluczowych aspektów:

• Formaty daty i czasu: Używaj formatów daty i czasu specyficznych dla danego regionu, aby zapewnić spójność i uniknąć nieporozumień.
• Formaty liczb: Używaj formatów liczb specyficznych dla danego regionu, w tym symboli walut i separatorów dziesiętnych.
• Formaty adresów: Dostosuj pola adresowe do formatów różnych krajów. Niektóre kraje mogą wymagać kodów pocztowych przed miastem, podczas gdy inne mogą w ogóle nie mieć kodów pocztowych.
• Walidacja numeru telefonu: Użyj biblioteki do walidacji numerów telefonów, która obsługuje międzynarodowe formaty numerów.
• Kodowanie znaków: Upewnij się, że Twój formularz poprawnie obsługuje różne zestawy znaków, w tym Unicode i inne znaki nielacińskie.
• Układ od prawej do lewej (RTL): Wspieraj języki pisane od prawej do lewej, takie jak arabski i hebrajski, odpowiednio dostosowując układ formularza.

Biorąc pod uwagę te międzynarodowe aspekty, możesz tworzyć formularze, które są dostępne i przyjazne dla użytkowników z całego świata.

Podsumowanie

Implementacja wieloetapowego potoku walidacji formularzy za pomocą hooka useFormState w React (lub alternatywnych bibliotek) może znacznie poprawić doświadczenie użytkownika, zwiększyć wydajność i ułatwić utrzymanie kodu. Rozumiejąc podstawowe koncepcje i stosując najlepsze praktyki opisane w tym przewodniku, możesz budować solidne i skalowalne formularze, które sprostają wymaganiom nowoczesnych aplikacji internetowych.

Pamiętaj, aby priorytetowo traktować doświadczenie użytkownika, dokładnie testować i dostosowywać strategie walidacji do specyficznych wymagań Twojego projektu. Dzięki starannemu planowaniu i wykonaniu możesz tworzyć formularze, które są zarówno funkcjonalne, jak i przyjemne w użyciu.

Dalsza nauka

• Oficjalna dokumentacja React
• Dokumentacja Formik
• Dokumentacja React Hook Form