Podstawy tworzenia i walidacji formularzy w React

Tworzenie formularzy w React JS jest stosunkowo proste i składa się z kilku etapów. Poniżej przedstawiam ogólne zasady tworzenia i walidacji formularzy w React JS:

1. Stwórz komponent formularza: Stwórz komponent React, który będzie zawierał wszystkie pola formularza i elementy kontrolne. Upewnij się, że komponent ten jest w stanie śledzić wszystkie zmiany wprowadzone przez użytkownika.

2. Utwórz funkcję obsługi zdarzeń dla zmiany wartości: Stwórz funkcję, która będzie wywoływana za każdym razem, gdy użytkownik zmieni wartość w polu formularza. Ta funkcja będzie aktualizować stan komponentu z wartością wprowadzoną przez użytkownika.

3. Utwórz funkcję obsługi zdarzeń dla przesłania formularza: Stwórz funkcję, która będzie wywoływana po przesłaniu formularza. Ta funkcja powinna skompilować i przetworzyć dane wprowadzone przez użytkownika, a następnie wysłać je na serwer.

4. Stwórz walidację danych wejściowych: Zanim dane zostaną przesłane na serwer, powinny zostać zweryfikowane i przetestowane pod kątem poprawności. W tym celu stwórz funkcje walidacji, które będą sprawdzać, czy dane wprowadzone przez użytkownika są poprawne. Jeśli dane są niepoprawne, funkcja powinna wyświetlić błąd i nie przesłać formularza.

5. Wykorzystaj komponenty formularza: Aby ułatwić tworzenie formularzy, można wykorzystać gotowe komponenty formularza. Te komponenty zawierają już funkcje obsługi zdarzeń dla zmiany wartości, obsługi zdarzeń dla przesłania formularza oraz funkcje walidacji danych.

6. Zadbaj o dobre praktyki bezpieczeństwa: Upewnij się, że formularze nie pozwalają na wstrzyknięcie kodu złośliwego i inne ataki typu XSS i CSRF. Stosuj zasady unikania bezpieczeństwa, takie jak walidacja danych wejściowych, kontroli dostępu i zabezpieczanie połączenia.

Ważne jest, aby pamiętać, że powyższe zasady są ogólne i można je dostosować do indywidualnych potrzeb projektu. Ważne jest również, aby testować formularze i walidacje pod kątem różnych przypadków użycia, aby upewnić się, że działają one poprawnie i bezpiecznie.

Oto przykładowy formularz rejestracyjny , który wymaga podania imienia, nazwiska, daty urodzenia. 
 

import React, { useState } from "react";
import { Link } from "react-router-dom";
import '../css/registrationform.css' // plik ze stylami CSS

function RegistrationForm() {
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    birthDate: "",
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };


  const handleSubmit = (event) => {
    event.preventDefault();
    // tu można przesłać dane na serwer, jeśli reCaptcha została zweryfikowana
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="firstName">Imię:</label>
        <input
          type="text"
          id="firstName"
          name="firstName"
          value={formData.firstName}
          onChange={handleInputChange}
          required
        />
      </div>

      <div>
        <label htmlFor="lastName">Nazwisko:</label>
        <input
          type="text"
          id="lastName"
          name="lastName"
          value={formData.lastName}
          onChange={handleInputChange}
          required
        />
      </div>

      <div>
        <label htmlFor="birthDate">Data urodzenia:</label>
        <input
          type="date"
          id="birthDate"
          name="birthDate"
          value={formData.birthDate}
          onChange={handleInputChange}
          required
        />
      </div>



      <button type="submit" >
        Zarejestruj się
      </button>
    </form>
  );
}

export default RegistrationForm;

Do takiego formularza warto dodać plik stylu np. :
 

 form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  div {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  
  label {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  input {
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid gray;
  }
  
  button {
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid gray;
    background-color: #007bff;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }
  
  button:disabled {
    background-color: gray;
    cursor: not-allowed;
  }
  
  .recaptcha-wrapper {
    display: flex;
    justify-content:center;
    align-items: center;
    margin-bottom: 1rem;
    }

W tym przypadku użyliśmy hooka useState do śledzenia stanu formularza, ale nie ma potrzeby dołączania biblioteki reCaptchy ani weryfikowania jej stanu. Formularz wymaga wypełnienia wszystkich trzech pól oraz kliknięcia przycisku "Zarejestruj się", aby dane zostały przesłane na serwer.

Poniżej podajemy kilka przykładów na funkcje sprawdzające dane liczbowe gdyby takie były w formularzu :
 

function isNumber(value) {
  // Sprawdza, czy wartość jest liczbą
  return typeof value === "number" && isFinite(value);
}

function isPositiveNumber(value) {
  // Sprawdza, czy wartość jest dodatnią liczbą
  return isNumber(value) && value > 0;
}

function isNonNegativeNumber(value) {
  // Sprawdza, czy wartość jest nieujemną liczbą
  return isNumber(value) && value >= 0;
}

Funkcja isNumber sprawdza, czy wartość jest liczbą. Funkcje isPositiveNumber i isNonNegativeNumber sprawdzają, czy wartość jest odpowiednio dodatnią lub nieujemną liczbą.

Oto przykład funkcji sprawdzającej, czy wprowadzony ciąg jest dłuższy niż 3 znaki i krótszy niż 50 znaków:

function isStringInRange(value) {
  return typeof value === "string" && value.length > 3 && value.length < 50;
}

Funkcja isStringInRange sprawdza, czy wartość jest ciągiem znaków (typeof value === "string") oraz czy jego długość jest większa niż 3 i mniejsza niż 50 (value.length > 3 && value.length < 50). Funkcja zwraca wartość true, jeśli ciąg spełnia te kryteria, lub false w przeciwnym razie. Funkcję można użyć w celu walidacji wprowadzonych przez użytkownika wartości, np. pola tekstowego w formularzu.

Ze względu na to że formularz pozwala na przesyłanie danych do serwera , bardzo ważnym aspektem jest bezpieczeństwo. Jest to temat dość obszerny natomiast poniżej przedstawiamy podstawowe aspekty z tym związane. 

Oto kilka sposobów na zabezpieczenie formularza przed różnego rodzaju atakami, takimi jak XSS (wstrzykiwanie złośliwego kodu) i CSRF (między witrynami), które mogą wpłynąć na bezpieczeństwo użytkownika i aplikacji internetowej:

1. Użyj biblioteki lub frameworka, który zapewnia zabezpieczenie przed XSS i CSRF. Na przykład, frameworki React, Angular i Vue posiadają wbudowane mechanizmy ochrony przed XSS i CSRF.

2. Waliduj wszystkie dane wprowadzane przez użytkownika. Zawsze sprawdzaj, czy dane spełniają oczekiwane kryteria, takie jak poprawność formatu, typu lub długości, przed użyciem ich w aplikacji.

3. Sanityzuj dane wprowadzane przez użytkownika. To znaczy, usuń z ciągów znaków niepożądane znaki lub kod HTML. Można to zrobić używając bibliotek takich jak DOMPurify lub sanitize-html.

4. Użyj mechanizmów zabezpieczeń serwera, takich jak tokeny CSRF i nagłówki bezpieczeństwa (np. Content Security Policy), aby zabezpieczyć aplikację przed atakami między witrynami.

5. Użyj SSL / TLS, aby zaszyfrować komunikację między przeglądarką użytkownika a serwerem, aby uniemożliwić atakującym przechwycenie danych przesyłanych przez sieć.

6. Ogranicz dostęp do zasobów i usług tylko dla autoryzowanych użytkowników. Nieudane próby uwierzytelnienia lub innych ataków powinny być logowane, aby zapewnić możliwość weryfikacji incydentów i reagowania na nie.