Váš webový formulář může aktivně reagovat na to, co do něj uživatel právě vyplnil. Můžete tak například zablokovat tlačítko pro odeslání objednávky, dokud nejsou všechna data zadána správně, nebo vyvolat vlastní akci na základě konkrétní chyby v kolonce. V nové verzi Foxentry API v2 jsme zjišťování stavu výrazně zjednodušili.

Jedna metoda pro všechno: getValidationStatus()

Ve starších verzích se používalo více různých příkazů, ale ve verzi 2 jsme vše sjednotili. Pro zjištění aktuálního stavu validace vám nyní stačí jediná metoda: Foxentry.getValidationStatus().

Tuto metodu můžete zavolat buď globálně (vrátí stav všech namapovaných kolonek na webu), nebo jí můžete jako parametr předat konkrétní formulář (pomocí CSS selektoru, DOM elementu nebo jQuery objektu) a získat tak stav pouze pro danou sekci.

Zjištění celkové validity formuláře

Pokud potřebujete jednoduše vědět, zda je formulář připravený k odeslání, zavoláte metodu a podíváte se na vlastnost isValid.

var status = Foxentry.getValidationStatus("#orderForm");

if (status.isValid) {
    console.log("Všechny údaje jsou validní, můžeme odeslat!");
} else {
    console.log("Ve formuláři jsou stále chyby.");
}

Komplexní stav jednotlivých vstupů (kolonek)

Metoda getValidationStatus vám v atributu inputs vrací i detailní seznam všech namapovaných kolonek a jejich aktuálních stavů. Pomocí javascriptu si tak můžete projít všechny zadané údaje a přesně zjistit, kde je problém.

U každé kolonky získáte tyto informace:

• isValid: true / false informace, zda je konkrétní údaj v pořádku.
• mark: vizuální stav kolonky. Může nabývat hodnot valid (zelená fajfka), invalid (červený křížek) nebo alert (oranžová výstraha). Výstraha se používá například při méně obvyklých tvarech jmen – údaj je sice platný, ale systém k němu má drobnou výhradu.
• message: konkrétní text chybové hlášky nebo upozornění, které se u kolonky zobrazuje.
• ref: přímý odkaz (reference) na konkrétní DOM element dané kolonky v HTML.

Příklad, jak vypsat všechny kolonky s chybou:

var status = Foxentry.getValidationStatus("#orderForm");

// Projdeme všechny vstupy ve formuláři
status.inputs.forEach(function(input) {
    if (input.mark === 'invalid') {
        console.warn("Chyba v kolonce:", input.ref);
        console.warn("Důvod chyby:", input.message);
    } else if (input.mark === 'alert') {
        console.warn("Kolonka má výstrahu:", input.ref);
    }
});

Validace na straně serveru

Dříve Foxentry generovalo skryté HTML inputy pro zjištění stavu po odeslání. V moderním webovém vývoji a s příchodem API v2 doporučujeme zachytit událost odeslání formuláře (onsubmit) přímo v Javascriptu. Zde pomocí getValidationStatus() zkontrolujete, zda je vše isValid, a teprve poté povolíte odeslání dat na váš server. Budete tak mít jistotu, že uživatel neodešle formulář dříve, než Foxentry dokončí svou práci.

Pořád nevíte? Ozvěte se nám