Walidacja Formularzy w JS

Zanim formularz wyśle dane do naszego Backendu (PHP) i zapisze je do Bazy Danych, bardzo dobrym zwyczajem jest powstrzymanie głupot jeszcze na ekranie użytkownika. Sprawdzenie, czy pola nie są puste, czy hasło ma min. 8 znaków i czy zaznaczono checkbox regulaminu to chleb powszedni na INF.03.

Prosta walidacja Ifami

Najpopularniejszy schemat sprawdzania polega na pobraniu danych z pól input i przepuszczeniu ich przez serię instrukcji warunkowych.

function sprawdzFormularz() {
    // 1. Złapmy wartości z HTML
    const imie = document.getElementById("imie").value;
    const regulamin = document.getElementById("regulamin").checked;
    const okienkoBledow = document.getElementById("bledy");
    
    // 2. Zeruj komunikaty na starcie
    okienkoBledow.innerHTML = "";
    
    // 3. Sprawdzaj po kolei!
    if (imie === "") {
        okienkoBledow.innerHTML += "<p>Proszę podać imię!</p>";
        return false; // Przerywa wysyłanie
    }
    
    if (regulamin === false) { // lub krócej: !regulamin
        okienkoBledow.innerHTML += "<p>Zaznacz regulamin!</p>";
        return false;
    }
    
    okienkoBledow.innerHTML = "<p>Wszystko okej, witaj " + imie + "!</p>";
}

Wyrażenia Regularne (RegEx) - Level Ekspert 🧠

Gdy na egzaminie padnie hasło: "Sprawdź czy wpisany e-mail zawiera znak @, nie ma spacji i ma format xyz@xyz.pl", budowanie potężnych ifów to morderstwo na klawiaturze. Służą do tego tzw. Regular Expressions.

Brzmią strasznie, wyglądają jak chińskie znaczki, ale oszczędzają masę czasu. Używamy ich głównie przy pomocy metody .test().

const email = document.getElementById("email").value;
// Pomiędzy sleszami / wpisujemy wzór
// W tym wypadku musi to składać się z cyfr
const wzorLiczbowy = /^[0-9]+$/; 

if (wzorLiczbowy.test(email) == false) {
    console.log("Ejże, podany e-mail nie powinien być z samych cyfr!");
}

Na szczęście na INF.03 skomplikowane RegExy pojawiają się rzadko. Większość arkuszy zadowala się tym, co pokazałem w pierwszym akapicie (sprawdzenie własności length u Stringów i właściwości .checked u checkboxów).

Ciekawostka HTML5: Dużą część walidacji można (i należy!) robić już na poziomie samego HTML. Dodanie atrybutu required do pola input sprawi, że przeglądarka sama nie pozwoli wysłać formularza, jeśli jest on pusty. Dodanie minlength="8" zabezpieczy długość hasła bez żadnej linijki JavaScriptu! Pamiętaj jednak, by to sprawdzić w poleceniach CKE, bo egzaminatorzy wprost każą robić to w skrypcie JS.