Ako vytvárať a overovať nádherné formuláre pomocou kódov Vanilla HTML, CSS a JS

Formy sú ťažké.  

Vedieť, ako správne zhromažďovať a overovať údaje používateľov, je jednou z najdôležitejších zručností, ktoré vývojový pracovník frontendu musí mať. Ale je to ťažké, pretože okrajových prípadov je neúrekom.

Musíte zvážiť všetky spôsoby, ako by používateľ mohol prelomiť vašu pekne malú formu a zároveň poskytnúť vynikajúci používateľský zážitok.

UX kus je dôležitý, pretože formy sú vrátnikmi pri premene na výrobky a služby. Ak sa ako frontendový vývojár pomýlite, môžu to mať značné finančné následky.

To je dôvod, prečo existujú tisíce (mierne preháňanie) knižníc formulárov, ktoré implementujú najlepšie priemyselné postupy.  

Na používaní týchto knižníc sa nestalo nič zlé. Problém nastáva, keď ich vývojári používajú bez toho, aby pochopili, ako formy skutočne fungujú a prečo sa určité vzory považujú za štandardy .

Ukážem vám, ako by som od nuly zostavil registračný formulár iba s použitím HTML, CSS a JavaScript.

Dobre, bez ďalších okolkov sa do toho ponoríme.

Jednoduchá (predvolená) stavová pasca

Desktop

Mobilné

Keď sa vám zobrazí taký dizajn, vaša prvá otázka by mala byť, koľko štátov tu nie je zastúpených?

Vyššie uvedené príklady predstavujú jeden stav (keď používateľ navštívi prihlasovaciu stránku, zobrazí sa mu to na počítači a mobilnom telefóne).

Medzi ďalšie štáty patrí:

  • Chybový stav
    • Čo sa stane, ak zadám e-mail, ktorý už existuje?
  • Stav načítania
    • Čo sa stane, keď odošlem formulár?

Pri plánovaní práce nezabudnite vziať do úvahy to, čo nie je v dizajne, s ktorým treba rátať. Musíte si pozorne prečítať požiadavky na funkcie a položiť otázky, ak si myslíte, že vám niečo chýba.

Požiadavky na funkcie

Keď už hovoríme o požiadavkách ...

Ako vývojárovi vám často bude predložený dokument PRD (Product Requirements Document) od produktového manažéra, dizajnéra alebo projektového manažéra.

Tieto dokumenty sa zvyčajne ďalej členia na jednotlivé príbehy používateľov, ktoré vykonáte počas šprintu.

Ak nasadím klobúk produktového manažéra, tu sú požiadavky na funkcie pre náš formulár:

  • Používateľ musí uviesť e-mailovú adresu
  • Heslo musí mať najmenej 10 znakov a obsahovať najmenej jedno veľké písmeno, číslo a špeciálny znak.
  • Ak nespĺňajú požiadavky, mali by sme používateľovi zobrazovať chybové správy

Značka

Prvý kód, ktorý napíšeme, bude HTML s čiarkou CSS.  

Zatiaľ sa to nezdá, ale je tu dobrá práca. Poďme sa trochu ponoriť.

  • Spolu s formulárom sme nastavili bočné a hlavné prvky
  • Používam BEM ako sprievodcu pri vytváraní názvov tried a sémantických prvkov HTML kvôli čitateľnosti.
  • Naša registračná stránka využíva prístup založený na mobilných zariadeniach, čo znamená, že najskôr napíšeme mobilné štýly a pre štýly pre počítače pridáme body prerušenia.
  • Využívam CSS mriežku pre celkové rozloženie a Flexbox pre pozičné prvky v hlavnej časti.
  • Pridal som do formulára poslucháča udalostí odoslania spolu s funkciou obsluhy udalosti, ktorá zatiaľ jednoducho prihlási objekt udalosti.

Validácia

Využime niektorú zabudovanú logiku overovania tým, že budeme rozumne vyberať typy vstupu. Použijeme nasledujúce:

  • Typ vstupu e-mailu
  • Typ vstupu hesla

Typ zadávania e-mailov nám poskytuje niekoľko pekných overení zadarmo.

  1. Kontroluje, či sa @symbol používa
  2. Tiež kontroluje, či sa za symbolom nachádza text

Pretože sa vyžaduje e-mail aj heslo, pridajme requiredatribút k obom prvkom. Pridáme tiež minlengthatribút k vstupu hesla.

 Sign up with Github   Twitter Or sign in with email and password Sign Up 

type=emailAtribút hovorí prehliadači, že by mala overiť správnosť zadania ako e-mailu.

minlengthAtribút na vstupe hesla nám dáva toto užitočné chybové hlásenie:

Teraz v našej funkcii handleSignupFormSubmit môžeme použiť API FormData na získanie hodnôt z nášho formulára a nakoniec ich odoslať do API.

function handleSignupFormSubmit(e) { // prevent default browser behaviour e.preventDefault(); const formDataEntries = new FormData(signupForm).entries(); const { email, password } = Object.fromEntries(formDataEntries); // submit email and password to an API }

Chybové správy

The error messages that are rendered by the browser are helpful to start, but what if you want these messages to render below their respective form input?  What if you want to control how they look?

Sadly, the browser doesn't give us any control over how the default error message are rendered. So this is where our dkh-form-field__messages div elements come into play. We can render our custom error messages inside these elements.

Let's write a couple custom validation functions to check that our user's password and email values meet the requirements.

 function validatePassword(password, minlength) { if (!password) return 'Password is required'; if (password.length < minlength) { return `Please enter a password that's at least ${minlength} characters long`; } const hasCapitalLetter = /[A-Z]/g; if (!hasCapitalLetter.test(password)) { return 'Please use at least one capital letter.'; } const hasNumber = /\d/g; if (!hasNumber.test(password)) { return 'Please use at least one number.'; } return ''; }
function validateEmail(email) { if (!email) return 'Email is required'; const isValidEmail = /^\[email protected]\S+$/g if (!isValidEmail.test(email)) { return 'Please enter a valid email'; } return ''; }

The regex /^\\[email protected]\\S+$/g is far from bullet proof, but it at least checks to make sure there are characters before and after the @ symbol.  

The best way to validate an email is to send a confirmation email to any user that signs up. The user would then have to open that email and click a link to confirm that their email address is valid.

If you'd like to dig deeper into client side email validation, this is a great thread.

Now, let's figure out how to render the error messages to the page.

function handleSignupFormSubmit(e) { // prevent default browser behaviour e.preventDefault(); const formDataEntries = new FormData(signupForm).entries(); const { email, password } = Object.fromEntries(formDataEntries); const emailErrorMessage = validateEmail(email); const passowrdErrorMessage = validatePassword(password); if (!emailErrorMessage) { // select the email form field message element const emailErrorMessageElement = document.querySelector('.email .dkh-form-field__messages'); // show email error message to user emailErrorMessageElement.innerText = emailErrorMessage; } if (passowrdErrorMessage) { // select the email form field message element const passwordErrorMessageElement = document.querySelector('.password .dkh-form-field__messages'); // show password error message to user passwordErrorMessageElement.innerText = passowrdErrorMessage; } }

One additional thing I'll call out: in order for these messages to show up, we need to remove the required attributes from both the email and password inputs.

We need to change the type attribute value for the email input.

We also need to remove the minlength attribute from the password input.

Updating these attributes removes the browser-based validation in favor of our own validation logic. Here's how our custom error messages will render:

Styles

I leave CSS until the end because, in my personal experience, it's a little harder to focus on logic when the visual design is complete.  

When a component or page "looks" done to the eye it can create a false sense that it is actually done. I don't have any research to back this up, just my personal opinion.

Here's the state of our code after adding quite a bit of CSS.

Desktop

Mobile

Error State

I included font awesome icons for the Github and Twitter Buttons.

 Sign up with  Github    Twitter 

Summary

We have created the building blocks to build sign up and log in forms without 3rd party libraries. You can check out the final source code here.

If you're using a framework like React or Vue, there are a ton of awesome form and validation libraries. You can lean on them to get the job done quickly.

Ak ste však vo vývoji softvéru nováčikom, odporúčam vám, aby ste sa pred použitím týchto nástrojov najskôr zamerali na základy.

Svoju prvú prácu ako vývojár som dostal pred piatimi rokmi a moja cesta k technológiám navždy zmenila môj život k lepšiemu. Verím, že je dôležité zamerať sa a osvojiť si základy, aby ste ľahšie pochopili nástroje ako React a Vue.

Jedným z problémov, ktoré som si všimol, keď som roky organizoval stretnutie, bolo to, že ľudia, ktorí začali programovať, siahli po knižniciach a frameworkoch príliš rýchlo. To ich nakoniec zranilo a mnohí sa počas pohovorov trápili.

Ak sa učíte, ako kódovať, a mohli by ste použiť nejakú pomoc, neváhajte a kontaktujte ma na twitteri. Teším sa, keď pomôžem, ako budem môcť.