Artykuły w kategorii

Ustawianie funkcji callback po walidacji

Zaktualizowano miesiąc temu

Walidatory Foxentry umożliwiają walidację wprowadzonych danych, niezależnie od tego, czy jest to poprawny adres, nazwa firmy, imię i nazwisko, numer telefonu czy adres e-mail. Każdy walidator sam ocenia poprawność wprowadzonych danych i wizualnie wyświetla użytkownikowi w przeglądarce wynik walidacji w postaci ikony i ramki. To zachowanie można wyłączyć w administracji projektu, jeżeli nie chcesz wyświetlać domyślnego wyniku walidacji użytkownika, ale chcesz najpierw przetworzyć wynik walidacji, a następnie sam zdecydować, co i w jakiej formie będziesz wyświetlać użytkownikowi.

Do faktycznego przetwarzania wyniku walidacji wykorzystywane są tzw. callbacki. Są to funkcje JavaScript, które Foxentry uruchamia po weryfikacji danych. Każdy callback uzyskuje od walidatora informację o poprawności wprowadzonych danych (poprawne/niepoprawne) oraz inne dane związane z przedmiotem walidacji (np. dane punktu adresowego, dane firmy itp.). Następnie możesz samodzielnie przetwarzać te dane (na przykład zrobić zestawienie dla użytkownika).

Sposób realizacji callbacków

Każdy callback musi istnieć jako funkcja javascript z jednym parametrem wejściowym. Foxentry wstawia do tego parametru walidator danych wyjściowych walidacji, tj. informacje o poprawności danych i ewentualnie szczegóły walidowanych danych.

W Foxentry jest 5 typów walidatorów, każdy typ ma przypisany kod, który umie z nim współpracować. Użyj tego kodu, aby ustawić funkcję callback dla danego typu walidatora.

Rodzaje walidatorów Foxentry i ich kody:

  • walidator adresu (kod „address“)
  • walidator firmy (kod „company“)
  • walidator imienia i nazwiska (kod „name“)
  • walidator adresu e-mail (kod „email“) a
  • walidator numeru telefonu (kod „phone“).

Każda z Twoich funkcji zwrotnych może mieć dowolną nazwę, to zależy od Ciebie. Musisz jednak zgłosić tę nazwę Foxentry za pomocą funkcji „onFoxentryProjectLoad”, która, jeśli istnieje (jest zdefiniowana w kodzie javascript), uruchamia się automatycznie po uruchomieniu Foxentry i załadowaniu projektu do przeglądarki. Stwórz więc tę funkcję i zdefiniuj w niej funkcję callback w sposób widoczny w poniższym kodzie. Nie jest konieczne definiowanie funkcji zwrotnych dla wszystkich typów walidatorów.

//  kod do wstawienia Foxentry, użyj własny
var Foxentry, e = document.querySelector("script"), s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.setAttribute('async', 'true');
s.setAttribute('src', 'https://app.foxentry.cz/lib');
e.parentNode.appendChild(s);
s.onload = function(){ 
  Foxentry = new FoxentryBase('foxentryform');      
}
 
// funkcja uruchamiana po załadowaniu projektu Foxentry do przeglądarki
function onFoxentryProjectLoad(){
  // definice callback funkcí, můžete nadefinovat všechny nebo jen některé
  FoxentryBuilder.setCallbacks(
    {
      "address" : addressValidationHandler,
      "company" : companyValidationHandler,
      "email"   : emailValidationHandler,
      "name"    : nameValidationHandler,
      "phone"   : phoneValidationHandler,
    }
  );   
}
    
//  same funkcje callback, w których przetwarzasz dane wyjściowe z walidatorów    


function addressValidationHandler(data, validatorInfo){ console.warn("address validation response", data, validatorInfo); } function companyValidationHandler(data, validatorInfo){ console.warn("company validation response", data, validatorInfo); } function emailValidationHandler(data, validatorInfo){ console.warn("email validation response", data, validatorInfo); } function nameValidationHandler(data, validatorInfo){ console.warn("name validation response", data, validatorInfo); } function phoneValidationHandler(data, validatorInfo){ console.warn("phone validation response", data, validatorInfo); }
Nadal nie wiesz? Napisz do nas.