Standardul HTML5 include un sistem nativ extrem de puternic de validare a formularelor (Client-side Form Validation). Fără a scrie nicio linie de JavaScript, browserul poate verifica automat tipul datelor, obligativitatea completării, lungimea minimă/maximă, formatele specifice prin expresii regulate (RegEx) și poate afișa mesaje de eroare localizate în limba utilizatorului.
<form action="/procesare-comanda" method="post">
<!-- 1. Câmp obligatoriu cu limită de caractere -->
<label for="nume">Nume complet (obligatoriu):</label>
<input type="text" id="nume" name="nume" required minlength="3" maxlength="60" autocomplete="name">
<!-- 2. Email validat nativ conform standardului RFC -->
<label for="email">Adresă de email:</label>
<input type="email" id="email" name="email" required autocomplete="email" placeholder="ion.popescu@exemplu.ro">
<!-- 3. Număr de telefon din România validat prin RegEx (pattern) -->
<label for="telefon">Telefon mobil (format 07xxxxxxxx):</label>
<input type="tel" id="telefon" name="telefon" required
pattern="^07[0-9]{8}$"
title="Numărul trebuie să înceapă cu 07 și să conțină exact 10 cifre."
inputmode="numeric" autocomplete="tel">
<!-- 4. Cod numeric cu interval și pas (step) -->
<label for="cantitate">Cantitate (multiplu de 5):</label>
<input type="number" id="cantitate" name="cantitate" min="5" max="100" step="5" value="5">
<!-- 5. Bifă de acord obligatorie -->
<label>
<input type="checkbox" name="acord_termeni" required>
Accept Termenii și Condițiile de utilizare.
</label>
<button type="submit">Trimite Comanda</button>
</form>Stilizarea Stărilor de Validare prin Pseudo-clase CSS
Browserele oferă pseudo-clase CSS speciale pentru a semnaliza vizual starea fiecărui câmp:
/* Câmp valid completat corect */
input:valid {
border-color: #16a34a;
}
/* Câmp invalid DUPĂ ce utilizatorul a interacționat cu el (:user-invalid) */
input:user-invalid {
border-color: #dc2626;
background-color: #fef2f2;
}
/* Semnalizare câmpuri obligatorii */
input:required {
border-left: 3px solid #3858e9;
}Regula de Aur a Securității
Validarea nativă HTML5 oferă o experiență de utilizare (UX) instantanee și reduce încărcarea serverului, dar nu înlocuiește niciodată validarea pe backend (PHP, Python, Node.js). Orice utilizator rău-intenționat poate ocoli validarea HTML dezactivând atributul required din DevTools sau trimițând cereri directe prin curl sau Postman.
Întrebări & Exemple de Cod:
Validarea Formularelor Nativ în HTML5 (Fără JavaScript)Ai o nelămurire despre utilizarea comenzii
Validarea Formularelor Nativ în HTML5 (Fără JavaScript)sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.