Hogyan készítsünk és érvényesítsünk gyönyörű űrlapokat Vanilla HTML, CSS és JS segítségével

Az űrlapok nehézek.  

A felhasználói adatok megfelelő gyűjtésének és érvényesítésének ismerete az egyik legfontosabb készség, amellyel a frontend fejlesztőjének rendelkeznie kell. De nehéz, mert éles esetek bővelkednek.

Meg kell fontolnia mindazokat a módszereket, amelyekkel a felhasználó megtörheti a szép kis formáját, miközben kiváló felhasználói élményt nyújt.

Az UX darab azért fontos, mert az űrlapok kapukat őrzik a termékek és szolgáltatások átalakításához. Ha Ön, mint front end fejlesztő, téved, akkor jelentős pénzügyi következményekkel járhat.

Éppen ezért több ezer (enyhe túlzással) formakönyvtár létezik, amelyek az ipar legjobb gyakorlatait alkalmazzák.  

Nincs semmi baj ezen könyvtárak használatával. A probléma akkor merül fel, amikor a fejlesztők úgy használják őket, hogy nem értik, hogy a formák valójában hogyan működnek, és miért tekintenek bizonyos mintákat szabványoknak .

Megmutatom, hogyan építeném fel a bejelentkezési űrlapot a semmiből, csak HTML, CSS és JavaScript használatával.

Ok, minden további szó nélkül merüljünk el.

Az egyetlen (alapértelmezett) állapotcsapda

Asztal

Mobil

Amikor bemutat egy ilyen dizájnt, az első kérdése az lenne, hogy hány állam nem képviselteti magát itt?

A fenti példák egy állapotot képviselnek (amikor egy felhasználó meglátogatja a bejelentkezési oldalt, akkor ezt látni fogja asztali és mobil eszközön).

Más államok a következők:

  • Hibaállapot
    • Mi történik, ha beírok egy már létező e-mailt?
  • Betöltési állapot
    • Mi történik, amikor benyújtom az űrlapot?

Munkája megtervezésekor feltétlenül vegye figyelembe, hogy mi nem szerepel a tervezésben, és amelyet el kell számolni. Gondosan át kell tekintenie a funkciók követelményeit, és kérdéseket kell feltennie, ha úgy gondolja, hogy valami hiányzik.

Funkciókövetelmények

Apropó követelmények ...

Fejlesztőként gyakran bemutatnak egy termékmenedzser, tervező vagy projektmenedzser PRD-jét (Product Requirements Document).

Ezeket a dokumentumokat általában tovább bontják egyedi felhasználói történetekre, amelyeket egy sprint során hajt végre.

Ha felteszem a termékmenedzseri kalapomat, íme az űrlapunkra vonatkozó követelmények:

  • A felhasználónak meg kell adnia egy e-mail címet
  • A jelszónak legalább 10 karakter hosszúnak kell lennie, és tartalmaznia kell legalább egy nagybetűt, számot és speciális karaktert.
  • Hibaüzeneteket kell megmutatnunk a felhasználónak, ha nem felelnek meg a követelményeknek

Jelölés

Az első kód, amelyet írunk, egy HTML lesz, csak egy csomó CSS-sel.  

Még nem tűnik soknak, de van itt valami jó munka. Merüljünk el egy kicsit.

  • Beállítottuk az oldal és a fő elemeket a formánkkal együtt
  • A BEM-et használom útmutatóként az osztálynevek és a szemantikus HTML-elemek létrehozásához az olvashatóság érdekében.
  • A regisztrációs oldalunk először a mobil megközelítést alkalmazza, vagyis először mobil stílusokat írunk, és töréspontokat adunk az asztali stílusokhoz.
  • Kihasználom a CSS rácsot az általános elrendezéshez, és a Flexbox-ot a pozícióelemekhez a fő részben.
  • Hozzáadtam egy beküldött eseményfigyelőt az űrlaphoz egy eseménykezelő függvénnyel együtt, amely egyelőre egyszerűen naplózza az eseményobjektumot.

Érvényesítés

Használjunk néhány beépített validációs logikát azáltal, hogy okosan megválasztjuk a bemeneti típusainkat. A következőket fogjuk használni:

  • E-mail bemenet típusa
  • Jelszó megadásának típusa

Az e-mail beviteli típus pár szép ellenőrzést ad nekünk ingyen.

  1. Ellenőrzi, hogy a @szimbólumot használják-e
  2. Azt is ellenőrzi, hogy van-e szöveg a szimbólum után

Mivel e-mail és jelszó egyaránt szükséges, adjuk hozzá az requiredattribútumot mindkét elemhez. A minlengthjelszó beviteléhez hozzáadunk egy attribútumot is.

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

Az type=emailattribútum azt mondja a böngészőnek, hogy e-mailként érvényesítenie kell a bevitelt.

A minlengthjelszó bevitelén található attribútum ezt a hasznos hibaüzenetet adja nekünk:

Most a handSignupFormSubmit függvényünkben a FormData API-t használhatjuk az értékek megszerzéséhez az űrlapunkból, és végül elküldhetjük őket egy API-nak.

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 }

Hibaüzenetek

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.

However, if you're new to software development, I would encourage you to focus on the fundamentals first before using these tools.

I got my first job as a developer five years ago and my journey into tech has forever changed my life for the better. I believe that it's important to focus on and master the fundamentals so that you can more easily grasp tools like React and Vue.

One of the problems I noticed when running a meetup myself for years was that people who were new to coding reached for libraries and frameworks too quickly. This ended up hurting them and many struggled during interviews.

If you are learning how to code and could use some help, feel free to reach out to me on twitter. Looking forward to helping however I can.