Înțelegerea ce este validarea formularului HTML5 și eticheta de intrare flotantă

Implementarea validării formularelor joacă un rol esențial în prevenirea utilizatorilor răuvoitori să introducă text idiot în câmpurile formularului. De asemenea, restricționează utilizatorii fără experiență să introducă în mod eronat informații greșite în formular.

Desigur, nu ați dori să colectați date incorecte de la utilizatori într-o manieră nesigură. Deci, este imperativ să definiți reguli de validare pentru formulare.

De ani de zile, am folosit codul JavaScript complex și TL;DR (adică Prea lung; nu am citit) pentru implementarea validării formularelor pe partea clientului. Din fericire, odată cu lansarea „validării formularelor HTML5”, acum putem adăuga validări la un formular cu JavaScript minim.

În timp ce cea mai recentă versiune HTML oferă mai multe beneficii, totuși, cel mai important este că vine livrat cu o mulțime de câmpuri de introducere noi și atribute esențiale pentru validarea unui formular fără a fi nevoie să scrieți cod complicat de validare JS (prescurtare pentru JavaScript).

Dar amintiți-vă că utilizatorii pot deveni cu ușurință frustrați atunci când completează un formular, mai ales când ajung să afle că datele pe care le-au introdus sunt greșite le poate crește frustrarea într-o măsură mai mare. Dar datorită HTML5, adăugarea etichetelor de intrare flotante poate valida datele formularului în același timp când utilizatorii completează formularul. În acest fel, utilizatorii vor ști imediat în cazul în care greșesc în câmpurile de introducere.

De exemplu, mai jos este o imagine postată pe Dribble de Matt Smith care demonstrează cum funcționează modelul de etichetă plutitoare atunci când este aplicat unui formular:

Această postare abordează modul în care puteți implementa etichete de intrare flotante atunci când adăugați validări la un formular HTML5.

Dar înainte de a începe

Cei mai mulți dintre voi ar putea dori să cunoască mai întâi procesul de validare a unui formular HTML5. La urma urmei, nu toți aveți experiență în scrierea codului de validare pentru un formular HTML5. De asemenea, este posibil să nu cunoașteți noile câmpuri de intrare și atribute introduse în HTML5.

O prezentare detaliată a validării formularelor HTML5

Când intenționați să validați un formular, se recomandă să începeți mai întâi cu validarea pe partea serverului. Și, în cazul în care sunteți un designer web bun, continuați cu adăugarea de validare la nivelul clientului, ajutându-vă utilizatorii să obțină feedback instantaneu indiferent dacă completează formularul cu datele corecte sau nu. De exemplu, oferirea de feedback imediat utilizatorilor atunci când introduc date în câmpul adresei de e-mail le va informa că adresa de e-mail introdusă este validă.

Una dintre caracteristicile grozave HTML5 este că ajută la implementarea validării clientului fără a depinde de scripturi. Mai degrabă, puteți efectua o astfel de sarcină utilizând „atribute de validare” pe elementele formularului. Cel mai important, trebuie doar să adăugați atributul „necesar” pentru un câmp de introducere, în timp ce de restul se ocupă browserul dumneavoastră.

Iată un exemplu care va explica utilizarea atributului obligatoriu pentru adăugarea de validare la un câmp de intrare:

[php]
Nume: <input type="text" name="yourname" required>
[/php]

Linia de cod de mai sus face browser-ul dvs. conștient de faptul că câmpul INPUT nume ar trebui considerat ca fiind obligatoriu (adică nu poate fi lăsat necompletat).

După cum puteți vedea, un marcator roșu este afișat în caseta de text corespunzătoare câmpului de introducere „Numele dumneavoastră”. Dar de îndată ce un text este introdus în câmpul de introducere a numelui, marcatorul se transformă într-o bifă care indică faptul că valoarea introdusă este validă.

În afară de <input type="text"> (adică tipurile de introducere a textului), HTML5 acceptă acum câteva noi opțiuni de introducere, cum ar fi căutare, e-mail, tel, datetime etc. Cu cuvinte simple, cu HTML5 putem scrie linia de cod de mai jos :

[php]
<input type="text" name="email">
[/php]

în ceva de genul:

[php]
<input type="email" name="email">
[/php]

Browserele desktop vor reda codul de mai sus la fel ca orice câmp de text standard.

Încă un lucru important pe care aș dori să-l aduc la cunoștința dvs. este că: atunci când veți încerca să introduceți atribute precum obligatoriu sau tipul de intrare = „e-mail” în demo-ul CodePen chiar și fără niciun conținut, veți primi o eroare. mesaj când faceți clic pe butonul „TRIMITERE” fără nicio adresă de e-mail validă:

În exemplul pe care l-am discutat mai sus, puteți vedea că browserul afișează implicit un mesaj de eroare. Dar dacă ați dori să aplicați propria dvs. regulă de validare (adică personalizată) valorii de intrare? Aici este util modelul Regex.

Înțelegerea tiparelor RegEx

Este posibil să fi văzut modele când ați introdus o adresă de e-mail precum abc@a. Inutil să spunem că ați dori ca utilizatorii dvs. să introducă o adresă de e-mail reală. Și, prin specificarea propriei alegeri a modelului care se potrivește cu datele dvs., vă va ajuta la validarea valorii introduse. De exemplu, vă puteți asigura că e-mailul se potrivește cu modelul care conține trei caractere sau mai multe la sfârșit. Pentru a face acest lucru, va trebui să utilizați „Atribut model” și Expresii regulate (RegEx).

RegEx este practic un limbaj care este folosit pentru a analiza sau manipula textul. Cel mai adesea, expresiile regulate sunt folosite pentru a efectua operațiuni complexe (cum ar fi căutarea și înlocuirea) pentru o mai bună formare a datelor text. Astăzi, puteți găsi utilizarea expresiilor regulate în aproape toate limbajele de programare și scripting. RegEx poate fi folosit pentru validarea datelor introduse în câmpurile formularului, prin aplicarea acestora pe tipurile de intrare utilizând atributul model după cum urmează:

[php]
<input id="phone" placeholder="111-111-1111" title="Text pentru a transmite modelul pentru numărul de telefon" model necesar="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

De asemenea, dacă apar erori de validare, puteți alege să determinați un atribut de titlu împreună cu eroarea de validare pentru a arunca un mesaj în afară de „Format greșit!” folosind linia de cod de mai jos:

[php]
<input type="email" placeholder="E-mail" model necesar="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="Vă rugăm să introduceți o adresă de e-mail validă aici.">
[/php]

Rețineți că nu trebuie să scrieți niciun model absurd pentru fiecare intrare. În schimb, în ​​multe cazuri, va trebui doar să atribuiți atributul necesar unui anumit tip de date. De exemplu, un număr peste 8 va arăta astfel:

[php]
<input type="number" min="8" required>
[/php]

De asemenea, rețineți că nu toate browserele oferă suport pentru toate atributele de validare disponibile. Luați, de exemplu, browserul Firefox nu este compatibil cu modelul „minlength”.

Beneficiul utilizării validării formularelor HTML5

Cel mai mare avantaj al implementării validării formularelor HTML5 este feedback-ul instantaneu. De cele mai multe ori, un fel de indicație va fi evidențiată în timp ce utilizatorii completează un câmp dintr-un formular, pentru a-i informa dacă valoarea introdusă este validă sau nu.

Acum, când introduceți ceva în caseta de text, culoarea marginii se schimbă în verde, după cum urmează:

Cu toate acestea, după cum puteți vedea, această abordare are un dezavantaj. Chiar și atunci când adăugați o valoare nevalidă (sau incompletă) în câmpul „Prenume”, utilizatorul primește o indicație că valoarea este corectă. Poate că vă gândiți să adăugați :invalid:not(:empty) în cod. Din păcate, o astfel de logică nu va funcționa cu browserele, deoarece acestea consideră, de obicei, elementele formularului ca fiind goale.

Te întrebi ce să faci?

Puteți încerca să adăugați noul pseudo-selector numit „:placeholder-shown” în cod, după cum urmează:

[php]
<form>
<etichetă>
<span>Prenumele</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="Introduceți cel puțin 4 caractere.">
</label>

<button>Trimite</button>

</form>
[/php]

Dar majoritatea browserelor nu par să ofere suport pentru substituent afișat, așa că este mai bine să scrieți un script pentru a comuta o clasă atunci când câmpul de intrare este gol sau nu. Iată codul JavaScript pentru același lucru:

[php]
$('input:empty, textarea:empty').addClass('empty');

$('input').keyup(function () {

dacă ($(acest).val().trim() !== ”) {

$(this).removeClass('gol');

} altfel {

$(this).addClass('gol');

}

});
[/php]

NOTĂ : Nu uitați să eliminați elementul substituent din marcajul HTML de mai sus.

Acum, când rulați fragmentul de cod de mai sus împreună cu marcajul HTML5, rezultatul va arăta astfel:

După cum puteți vedea, culoarea casetei de text rămâne roșie până când validarea aplicată câmpului nu este îndeplinită. Și făcând clic pe Trimite se afișează un mesaj de eroare la introducerea unui nume incomplet.

Dar, de îndată ce utilizatorul introduce întregul (depășind 3 caractere), culoarea chenarului casetei de text se schimbă în verde.

Cum puteți adăuga o etichetă de intrare flotantă în HTML5?

Și acum, să discutăm despre abordarea de adăugare a etichetei de intrare flotantă la validarea formularului HTML5. Făcând acest lucru, ajută la îmbunătățirea aspectului și senzației formei. Iată marcajul HTML.

Pentru a implementa modelul de etichetă flotantă, va trebui să împingeți eticheta chiar sub elementul <input> din marcajul HTML:

[php]
<form>
<etichetă>
<input type="text" pattern=".{4,}" required title="Caracterele nu trebuie să fie mai mici de 4.">
<span>Numele dvs.</span>
</label>
<etichetă>
<input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="Vă rugăm să introduceți un e-mail valid.">
<span>E-mailul dvs.</span>
</label>
<button>Trimite</button>

</form>
[/php]

CSS va arăta ceva de genul:

[css]
eticheta {
poziție: relativă;
display: inline-block;
}
label span {
poziție: absolută;
stânga: 20px;
sus: -2em;
dimensiunea fontului: .75em;
cursor: text;
culoare: #f27853;
tranziție: toate 150ms ușurință;
}
intrare {
chenar: 1px solid #f2f2f2;
contur: niciunul;
}
input:focus {
culoare-chenar: #d9d9d9;
}
input:valid {
culoare-chenar: #42d142;
}
input:invalid {
culoare-chenar: #ff8e7a;
}
input.empty {
culoare-chenar: #d9d9d9;
}
input.empty + span {
sus: 50%;
transforma: translateY(-50%);
dimensiunea fontului: 1em;
fundal: niciunul;
culoare: #cccccc;
}
corp {
display: flex;
inaltime minima: 100vh;
fundal: #f1f1f1;
familie de fonturi: 'Lato', sans-serif;
dimensiunea fontului: 150%;
}
formular {
margine: auto;
}

intrare, butonul {
umplutură: 15px 20px;
chenar-rază: 1px;
chenar: 2px solid #bdbdbd;
}

butonul {
culoare-chenar: #363636;
fundal: #363636;
culoare: #FFFFFF;
}
[/css]

Și, în sfârșit, scrieți codul JavaScript:

[cod]
$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function () {
dacă ($(acest).val().trim() !== ”) {
$(this).removeClass('gol');
} altfel {
$(this).addClass('gol');
}
});
[/cod]

Ieșire:

Puteți implementa mai multe efecte atunci când utilizați etichete de intrare flotante în HTML5, cum ar fi:

• Adăugați pictograme cu efect de fade in/out în timp ce validați un formular HTML5.
• Agitați intrarea dacă datele introduse nu sunt valide.
• Slăbiți culoarea intrărilor atunci când sunt completate corect.

Lucruri de luat în considerare

Când lucrați la implementarea validărilor într-un formular HTML5, trebuie să vă familiarizați cu:

1. Suport browser : formularele HTML5 funcționează în browserele moderne și IE10+ într-un mod perfect. Deși versiunea IE 9 și versiunile mai vechi nu acceptă pseudo-selectori de validare care vă împiedică să stilați formularul, dar va funcționa în continuare corect.
2. Avertisment : Un lucru pe care nu îl puteți efectua atunci când aplicați validări unui formular HTML5 este stilarea mesajelor de validare. Asta pentru că o astfel de funcționalitate este dezactivată de browsere.

Cuvinte finale

Implementarea validărilor într-un formular este crucială pentru adăugarea unui strat suplimentar de securitate site-ului dvs. Acest lucru se datorează faptului că împiedică utilizatorii nelegiuiți să adauge text rău intenționat ca valoare în câmpurile formularului. În plus, oferirea de feedback instantaneu utilizatorilor atunci când introduc o anumită intrare într-un câmp de introducere validat al formularului va ajuta la îmbunătățirea experienței acestora. La urma urmei, nu vor trebui să-și petreacă timp recunoscând că au făcut o greșeală în completarea formularului. Dar, validarea unui formular folosind numai JavaScript poate fi o provocare. Acesta este locul în care validarea formularului HTML5 vă vine în ajutor.

Când aplicați validări unui formular folosind HTML5, nu este nevoie să scrieți linii lungi de cod JS complex. În schimb, puteți implementa reguli de validare a formularelor cu codificare JavaScript minimă. Cel mai important, multe funcții noi sunt disponibile cu validarea formularului HTML5, cum ar fi eticheta de intrare flotantă, care fac ca un formular să arate superb, încurajând utilizatorii să trimită formularul.