Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy

Spis treści

1. Wprowadzenie
2. Zastosowanie biblioteki
   1. Prosta walidacja true / false
   2. Walidacja ze zwrotką zawierającą błędy
   3. Własne teksty dla błędów walidacji
3. Zastosowanie Yup w React
   1. Czysty React bez bibliotek
      1. Pełny kod
      2. Kod na github
   2. Wsparcie w bibliotekach do obsługi formularzy w React
4. Podsumowanie

Wprowadzenie

Choć od dawna HTML5 udostępnia nam możliwość walidowania formularzy za pomocą atrybutów na polach takich jak required, min, max, minlength czy maxlength, to rozwiązanie rzadko kiedy jest wystarczające. Nie mamy chociażby możliwości stylowania popupu informującego o błędzie walidacji, nie możemy zmienić też tekstu błędu. Dodatkowo, wygląda on różnie w różnych przeglądarkach.

Co prawda, CSS dostarcza pseudoklasy związane z walidacją, opisane np tutaj: Styling Form Inputs in CSS With :required, :optional, :valid and invalid i na ich podstawie, budując skomplikowane selektory możnaby kolorować pola, wyświetlać użytkownikowi błędy itd jednak nadal potrzebujemy walidacji w JS choćby wtedy, gdy chcemy sprawdzić coś niestandardowego jak UUID.

Biblioteka Yup służy do budowania schematów walidacji obiektów oraz parsowania jednych obiektów na drugie. Choć naturalnym miejscem jej użycia są walidacje formularzy, nie jest do tego ograniczona – walidować i parsować można np dane z API backendowego, ponieważ Yup waliduje bezpośrednio obiekt z danymi, nie ma powiązania z np DOMem.

Zastosowanie biblioteki

Prosta walidacja true / false

Jeżeli interesuje nas tylko to, czy wartość przechodzi walidację czy nie, możemy użyć metody isValid.

Za pomocą tej metody możemy walidować zarówno proste wartości:

const schema = yup.number()

await schema.isValid(4) // true

await schema.isValid('s') // falseCopy

Jak i obiekty:

const schema = yup.object().shape({
  name: yup.string().min(3),
  age: yup.number().min(18)
})

await schema.isValid({name: 'R', age: 17}) // false

await schema.isValid({name: 'Radek', age: 18}) //true
Copy

Funkcja isValid zwraca Promise, z wynikiem walidacji, w poście używana jest składnia async/await ponieważ wsparcie przeglądarek jest już wystarczające: https://caniuse.com/#search=await.
Tak wygląda porównanie ze składnią klasyczną:

const valid = await schema.isValid(...)

schema.isValid(...).then(valid => {})Copy

Walidacja ze zwrotką zawierającą błędy

Jeżeli chcemy dostać szczegółową informację które pola mają błędy i jakie to są błędy, należy użyć metody validate. W przypadku gdy nie ma błędów zwróci ona obiekt który został przekazany.

Jeżeli występują błędy oraz przy założeniu że ustawimy opcję abortEarly na false aby wykonała się walidacja całego obiektu zamiast wyrzucać błąd przy pierwszym błędzie, zostanie rzucony błąd zawierający tablicę errors z tekstami błędów oraz tablicę inner, która zawierać będzie obiekty szczegółowo opisujące błąd:

try {
  await schema.validate({name: 'R', age: 17}, {abortEarly: false});
}
catch (e) {
  const errors = e.inner.map(el => ({
    fieldName: el.path,
    message: el.message,
  }))
  .reduce((acc, current) => ({
    ...acc,
    [current.fieldName]: current.message,
  }), {});
  console.log({errors});
}Copy

Choć kod może wydać się nieco zawiły, robi prostą rzecz:

1. Mapowanie wyciąga z rozbudowanej struktury zwróconej przez bibliotekę pola które nas interesują, czyli nazwę pola oraz treść wiadomości
2. Reduce tworzy obiekt, którego kluczami są nazwy pól a wartościami treści wiadomości, tak by struktura ta dała się łatwo użyć przy wyświetlaniu wiadomości o błędzie

Rezultat wywołania tego kodu będzie następujący:

{
  name:"name must be at least 3 characters",
  age:"age must be greater than or equal to 18"
}Copy

Własne teksty dla błędów walidacji

Biblioteka Yup dostarcza predefiniowane wiadomości dla błędów, można je jednak zmienić:

yup.setLocale({
  string: {
    min: 'Provide at least ${min} characters, please'
  }
});Copy

Nie musimy nadpisywać wszystkich tekstów – jeżeli nie podaliśmy wiadomości dla jakiegoś błędu, zostanie użyta wartość domyślna dostarczona przez bibliotekę. Efekt wywołania powyższego kodu po aktualizacji tekstów będzie następujący:

{
  name: "Provide at least 3 characters, please",
  age: "age must be greater than or equal to 18"
}Copy

Zastosowanie Yup w React

Czysty React bez bibliotek

Stwórzmy prosty formularz Reactowy:

<form onSubmit={onSubmit}>
  <input placeholder="Name" value={name} onChange={e => {
    setName(e.target.value);
    setErrors({});
  }} />
  {errors.name && <div style={{color: 'red'}}>{errors.name}</div>}
  <br />

  <input placeholder="Age" type="number" value={age} onChange={e => {
    setAge(e.target.value);
    setErrors({});
  }} />
  {errors.age && <div style={{color: 'red'}}>{errors.age}</div>}
  <br />

  <button>Submit</button>
</form>Copy

Formularz ten zawiera dwa pola, name oraz age. Poza ustawianiem wartości gdy użytkownik coś wpisuje, czyszczone są również błędy formularza – jest to dość popularna praktyka.

Weźmy istniejący schemat:

const schema = yup.object().shape({
  name: yup.string().min(3),
  age: yup.number().min(18),
});Copy

I zaaplikujmy go do danych z formularza w momencie wysyłania:

const onSubmit = async e => {
  e.preventDefault();
  const data = { name, age };
  try {
    await schema.validate(data, {abortEarly: false});
    alert(JSON.stringify(data));<br>}<br>catch (e) {
    const errors = e.inner.map(el => ({
      fieldName: el.path,
      message: el.message,
    })).reduce((acc, current) => ({
      …acc,
      [current.fieldName]: current.message,
    }), {});
    setErrors(errors);
  }
}Copy

Jeżeli walidacja nie rzuci żadnym błędem, wtedy dane są wyświetlane w okienku. Jeżeli natomiast poleci błąd, dane są przetwarzane na przyjaźniejszą postać oraz na ich podstawie wyświetlane są wiadomości dla użytkownika:

//...
{errors.name && <div style={{color: 'red'}}>{errors.name}</div>}
//...
{errors.age && <div style={{color: 'red'}}>{errors.age}</div>}Copy

Pełny kod

Poniżej znajduje się pełny kod tego przykładu. Po zainstalowaniu zależności nadaje się on do skopiowania i uruchomienia:

import React, {useState} from 'react';
import * as yup from "yup";

const schema = yup.object().shape({
  name: yup.string().min(3),
  age: yup.number().min(18),
});

function App() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [errors, setErrors] = useState({});

  const onSubmit = async e => {
    e.preventDefault();
    const data = { name, age };
    try {
      await schema.validate(data, {abortEarly: false});
      alert(JSON.stringify(data));
    }
    catch (e) {
      const errors = e.inner.map(el => ({
        fieldName: el.path,
        message: el.message,
      })).reduce((acc, current) => ({
        ...acc,
        [current.fieldName]: current.message,
      }), {});
      setErrors(errors);
    }
  }

  return (
    <form onSubmit={onSubmit} style={{padding: '20px'}}>
      <input placeholder="Name" value={name} onChange={e => {
        setName(e.target.value);
        setErrors({});
      }} />
      {errors.name && <div style={{color: 'red'}}>{errors.name}</div>}
      <br />

      <input placeholder="Age" type="number" value={age} onChange={e => {
        setAge(e.target.value);
        setErrors({});
      }} />
      {errors.age && <div style={{color: 'red'}}>{errors.age}</div>}
      <br />
      <button>Submit</button>
   </form>
  );
}

export default App;Copy

Kod na github

Możesz również uruchomić kod korzystając z repozytorium na Github: https://github.com/radek-anuszewski/react-yup-example

Wsparcie w bibliotekach do obsługi formularzy w React

Z popularnych bibliotek, biblioteka Formik najprościej integruje się z Yup, wystarczy przekazać schemat jako parametr validiationSchema: https://frontcave.pl/biblioteki-do-formularzy-w-react-3-formik/#walidacja-yup .

Biblioteka React-hook-form zawiera w swej dokumentacji przykład jak podpiąć Yup za pomocą customowego hooka: https://react-hook-form.com/advanced-usage/#CustomHookwithResolver.

Dla biblioteki React Final Form natomiast dostępny jest Gist z przykładem integracji: https://gist.github.com/manzoorwanijk/5993a520f2ac7890c3b46f70f6818e0a

Podsumowanie

Biblioteka Yup w wydatny sposób pomoże nam z walidacją formularzy. Obsługa zagnieżdżeń uprości walidację skomplikowanych obiektów, przydatna jest też możliwość podmiany tekstów na własne.