Walidację formularza WordPress możesz dodać przez wtyczkę albo kod PHP. W obu przypadkach pamiętaj, że sprawdzanie danych w JavaScript poprawia wygodę użytkownika, ale dopiero walidacja po stronie serwera chroni formularz i dane.
Dlaczego walidacja formularza jest potrzebna?
Walidacja front-end, oparta na HTML5 lub JavaScript, pozwala szybko poinformować użytkownika o brakującym adresie e-mail, zbyt krótkim tekście czy niepoprawnym formacie numeru. To poprawia UX, ponieważ błąd pojawia się bez przeładowywania strony.
Nie można jednak polegać wyłącznie na kodzie działającym w przeglądarce. Użytkownik lub bot może wysłać żądanie bez uruchamiania JavaScriptu. Dlatego dane trzeba sprawdzić ponownie w PHP, po stronie serwera, a przed zapisaniem także oczyścić. Taka walidacja ogranicza ryzyko zapisania błędnych danych i utrudnia wykorzystanie formularza do ataków, takich jak XSS lub SQL Injection.
Jaką metodę wybrać?
| Metoda | Zalety | Wady | Dla kogo |
|---|---|---|---|
| Wtyczka | Szybka konfiguracja, gotowe reguły, komunikaty błędów | Mniejsza kontrola nad nietypową logiką, zależność od zgodności wtyczki | Właściciele stron i proste formularze |
| Kod PHP | Pełna kontrola nad warunkami, sanitizacją i zapisem danych | Wymaga znajomości WordPressa, PHP i hooków | Programiści oraz rozbudowane formularze WooCommerce |
Jak dodać walidację wtyczką?
W przypadku formularza kontaktowego możesz użyć narzędzi takich jak Contact Form 7 lub WPForms. W sklepie WooCommerce przydatne są także wtyczki do edycji pól zamówienia, na przykład Flexible Checkout Fields. Przed instalacją sprawdź, czy dane rozwiązanie obsługuje używany typ formularza.
Standardowa konfiguracja wygląda zwykle tak:
- Utwórz formularz lub otwórz istniejący formularz w panelu WordPress.
- Dodaj pole tekstowe, adres e-mail, telefon albo inne pole wymagane przez formularz.
- Włącz opcję Required, jeśli użytkownik musi podać wartość.
- Wybierz regułę formatu, na przykład e-mail, numer telefonu, kod pocztowy albo minimalną długość tekstu.
- Ustaw czytelny komunikat i wyślij formularz testowy z poprawną oraz błędną wartością.
W formularzach WooCommerce część walidacji jest dostępna domyślnie. Dotyczy to między innymi adresu e-mail, telefonu i kodu pocztowego. Wtyczka może udostępnić te same reguły dla pól niestandardowych, a czasem także pozwolić na dodanie własnej funkcji PHP.
Przy konfiguracji sprawdź przede wszystkim, czy pole powinno być obowiązkowe. Pole NIP może być wymagane w sklepie wyłącznie dla firm, ale w sprzedaży kierowanej także do konsumentów zwykle powinno pozostać opcjonalne.
Jak dodać walidację kodem w WooCommerce?
Najpierw ustal, jakiego rodzaju formularz zamówienia działa w sklepie. Otwórz stronę zamówienia w edytorze WordPress. Blok zamówienia oznacza wersję blokową. Shortcode [woocommerce_checkout] wskazuje na klasyczne zamówienie. To ważne, ponieważ oba rozwiązania korzystają z innych mechanizmów API.
Zamówienie blokowe
W wersji blokowej WooCommerce dodatkowe pole rejestruje się przez funkcję woocommerce_register_additional_checkout_field(). Poniższy przykład dodaje opcjonalne pole NIP i sprawdza, czy po oczyszczeniu zawiera dokładnie 10 cyfr:
add_action( 'woocommerce_init', function () {
if ( ! function_exists( 'woocommerce_register_additional_checkout_field' ) ) {
return;
}
woocommerce_register_additional_checkout_field(
array(
'id' => 'moj-sklep/nip',
'label' => 'NIP do faktury',
'location' => 'address',
'type' => 'text',
'required' => false,
// Usuwa spacje, myślniki i wszystkie znaki inne niż cyfry.
'sanitize_callback' => function ( $value ) {
return preg_replace( '/[^0-9]/', '', (string) $value );
},
// Regex / ^[0-9]{10}$/ wymaga dokładnie dziesięciu cyfr.
'validate_callback' => function ( $value ) {
if ( '' !== $value && ! preg_match( '/^[0-9]{10}$/', $value ) ) {
return new WP_Error(
'nip_niepoprawny',
'NIP powinien mieć 10 cyfr.'
);
}
},
)
);
} );W tym API funkcja sanitizująca przygotowuje wartość do zapisu, a funkcja walidująca decyduje, czy formularz może zostać wysłany. Jeśli chcesz odczytać wartość pola z obiektu zamówienia, użyj mechanizmu CheckoutFields opisanego w dokumentacji WooCommerce.
Zamówienie klasyczne
W klasycznym formularzu możesz dodać pole przez filtr woocommerce_billing_fields:
add_filter( 'woocommerce_billing_fields', function ( $fields ) {
$fields['billing_nip'] = array(
'label' => 'NIP do faktury',
'required' => false,
'class' => array( 'form-row-wide' ),
'priority' => 35,
);
return $fields;
} );Własną walidację takiego pola można wykonać podczas sprawdzania danych zamówienia, używając właściwych filtrów WooCommerce. Wartość pola klasycznego zamówienia jest przechowywana pod kluczem _billing_nip. Przy włączonym HPOS nie odczytuj jej bezpośrednio z tabeli wpisów. Korzystaj z metod obiektu zamówienia, na przykład $order->get_meta( '_billing_nip' ).
Nie wklejaj kodu do motywu głównego. Użyj własnej wtyczki albo motywu potomnego i najpierw przetestuj zmianę na kopii sklepu. Aktualizacja motywu może usunąć kod, a błędny fragment PHP może zablokować działanie strony.
Najczęściej sprawdzane elementy formularza to:
- Pole wymagane – nie pozwala wysłać formularza bez wartości.
- Adres e-mail – sprawdza podstawową składnię adresu.
- Numer telefonu – ogranicza dozwolony format znaków i długość.
- Kod pocztowy lub NIP – weryfikuje format za pomocą wyrażenia regularnego.
Na co uważać przy tworzeniu walidacji?
Przed wdrożeniem przejdź całą ścieżkę wysyłki formularza. Lista kontrolna powinna obejmować:
- Test na kopii strony lub środowisku testowym.
- Sprawdzenie, czy formularz jest klasyczny, czy blokowy.
- Weryfikację działania walidacji bez JavaScriptu.
- Sprawdzenie komunikatów dla poprawnych i błędnych danych.
- Potwierdzenie, że dane trafiają do właściwego pola zamówienia i faktury.
Komunikaty powinny mówić, co użytkownik ma poprawić, ale nie ujawniać szczegółów technicznych. Nie przesadzaj też z liczbą reguł. Walidacja ma odrzucać dane rzeczywiście niepoprawne, a nie blokować zakup przez drobne różnice w zapisie.
Jeżeli formularz jest często atakowany przez boty, możesz uzupełnić walidację o honeypot, ograniczenie liczby żądań lub narzędzie antyspamowe, takie jak Akismet. Są to mechanizmy ochronne, ale nie zastępują walidacji danych po stronie serwera.
Najprostsza zasada jest taka: wtyczka wystarczy do standardowych formularzy, natomiast kod PHP daje większą kontrolę w WooCommerce. Przy zamówieniach blokowych użyj API dodatkowych pól, a przy klasycznych filtrów i metod obiektu zamówienia.
