Formele sunt dure.

A ști cum să colectezi și să validezi corect datele utilizatorilor este una dintre cele mai importante abilități pe care trebuie să le aibă un dezvoltator frontend. Dar este greu, deoarece cazurile de margine abundă.

Trebuie să luați în considerare toate modurile în care un utilizator ar putea să vă rupă forma destul de mică, oferind în același timp o experiență excelentă pentru utilizator.

Piesa UX este importantă, deoarece formularele sunt mijloacele de acces la conversiile pentru produse și servicii. Dacă, în calitate de dezvoltator frontal, greșești, ar putea exista consecințe financiare semnificative.

Acesta este motivul pentru care există mii (ușoară exagerare) de biblioteci de forme care implementează cele mai bune practici din industrie.

Nu este nimic în neregulă cu utilizarea acestor biblioteci. Problema apare atunci când dezvoltatorii le folosesc fără a înțelege cum funcționează de fapt formele și de ce sunt luate în considerare anumite tipare standarde.

Vă voi arăta cum aș construi un formular de înscriere de la zero, folosind doar HTML, CSS și JavaScript.

Ok, fără alte întrebări, să ne scufundăm.

Capcana de stare unică (implicită)

Desktop

Cum sa construiesti si sa validezi forme frumoase cu Vanilla

Mobil

Când vi se prezintă un design ca acesta, prima dvs. întrebare ar trebui să fie, câte state nu sunt reprezentat aici?

Exemplele de mai sus reprezintă o stare (atunci când un utilizator accesează pagina de autentificare, aceasta este ceea ce va vedea pe desktop și pe mobil).

Alte state ar include:

  • Stare de eroare
    • Ce se întâmplă dacă introduc un e-mail care există deja?
  • Starea de încărcare
    • Ce se întâmplă când trimit formularul?

Când vă planificați munca, asigurați-vă că luați în considerare ceea ce nu este inclus în proiect și care trebuie luat în considerare. Trebuie să examinați cu atenție cerințele funcției și să puneți întrebări dacă credeți că lipsește ceva.

Cerințe privind caracteristicile

Apropo de cerințe …

Ca dezvoltator, vi se va prezenta adesea un PRD (Documentul privind cerințele produsului) de la un manager de produs, designer sau manager de proiect.

Aceste documente sunt de obicei împărțite în povești de utilizator individuale pe care le veți executa în timpul unui sprint.

Îmi pun pălăria de manager de produs, iată cerințele pentru caracteristicile formularului nostru:

  • Utilizatorul trebuie să furnizeze o adresă de e-mail
  • Parola trebuie să aibă cel puțin 10 caractere și să conțină cel puțin o literă mare, un număr și un caracter special.
  • Ar trebui să afișăm mesaje de eroare utilizatorului atunci când acesta nu îndeplinește cerințele

Markup

Primul cod pe care îl vom scrie va fi HTML cu doar o linie de CSS.

Nu pare încă mult, dar există o treabă bună aici. Hai să ne scufundăm puțin.

  • Avem elemente de configurare și elemente principale împreună cu formularul nostru
  • Folosesc BEM ca ghid pentru crearea de nume de clase și elemente HTML semantice pentru lizibilitate.
  • Pagina noastră de înscriere are o abordare mobilă, ceea ce înseamnă că mai întâi scriem stiluri mobile și adăugăm puncte de întrerupere pentru stilurile desktop.
  • Folosesc grila CSS pentru aspectul general și Flexbox pentru elementele de poziție din secțiunea principală.
  • Am adăugat un ascultător de evenimente pentru formular împreună cu o funcție de gestionare a evenimentelor care înregistrează pur și simplu obiectul evenimentului deocamdată.

Validare

Să folosim unele logici de validare încorporate alegând tipurile noastre de intrare cu înțelepciune. Vom folosi următoarele:

  • Tipul de introducere a e-mailului
  • Tipul de introducere a parolei

Tipul de introducere a e-mailului ne oferă gratuit câteva validări frumoase.

  1. Se verifică pentru a vă asigura că @ este folosit simbolul
  2. De asemenea, verifică dacă există text după simbol

Deoarece sunt necesare atât e-mail cât și parolă, să adăugăm required atribuie ambelor elemente. Vom adăuga și un minlength atribut introducerii parolei.

<form id="dkh-signup-form">
  <div class="dkh-form-header">
    <div>
      <small>Sign up with</small>
      <div class="dkh-form-header__social-wrapper">
        <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-github">
          Github
        </button>
        <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-twitter">
          Twitter
        </button>
      </div>
    </div>
  </div>
  <div class="dkh-form-body">
    <small>Or sign in with email and password</small>
    <div class="dkh-form-field">
      <fieldset>
        <input autofocus class="dkh-form-field__input" name="email" type="email" id="email" required placeholder="Email">
      </fieldset>
      <div class="dkh-form-field__messages"></div>
    </div>
    <div class="dkh-form-field">
      <fieldset>
        <input class="dkh-form-field__input" name="password" type="password" id="password" required minlength="10" placeholder="Password">
      </fieldset>
      <div class="dkh-form-field__messages"></div>
    </div>
  </div>
  <div class="dkh-form-footer">
    <button class="dkh-btn dkh-btn-primary" type="submit">Sign Up</button>
  </div>
</form>

type=email atributul îi spune browserului că ar trebui să valideze intrarea ca e-mail.

1612005846 906 Cum sa construiesti si sa validezi forme frumoase cu Vanilla

minlength atributul de introducere a parolei ne oferă acest mesaj de eroare util:

1612005846 224 Cum sa construiesti si sa validezi forme frumoase cu Vanilla

Acum, în funcția noastră handleSignupFormSubmit, putem folosi API FormData pentru a obține valorile din formularul nostru și, în cele din urmă, pentru a le trimite unui 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
}

Mesaje de eroare

Mesajele de eroare redate de browser sunt utile pentru a începe, dar ce se întâmplă dacă doriți ca aceste mesaje să fie redate sub formularul de intrare respectiv? Ce se întâmplă dacă doriți să controlați cum arată?

Din păcate, browserul nu ne oferă niciun control asupra modului în care sunt redate mesajele de eroare implicite. Deci, aici este locul nostru dkh-form-field__messages elementele div intră în joc. Putem reda mesajele noastre de eroare personalizate în interiorul acestor elemente.

Să scriem câteva funcții de validare personalizate pentru a verifica dacă parola utilizatorului și valorile de e-mail îndeplinesc cerințele.


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 = /^S+@S+$/g
  if (!isValidEmail.test(email)) {
    return 'Please enter a valid email';
  }

  return '';
}

Regexul /^\S+@\S+$/g este departe de a fi antiglonț, dar măcar verifică pentru a vă asigura că există caractere înainte și după @ simbol.

Cel mai bun mod de a valida un e-mail este să trimiteți un e-mail de confirmare oricărui utilizator care se înscrie. Utilizatorul va trebui apoi să deschidă acel e-mail și să facă clic pe un link pentru a confirma că adresa sa de e-mail este validă.

Dacă doriți să vă adânciți în validarea e-mail-ului clientului, acesta este un lucru extraordinar fir.

Acum, să ne dăm seama cum să redăm mesajele de eroare pe pagină.

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;
  }
}

Un alt lucru pe care îl voi striga: pentru ca aceste mesaje să apară, trebuie să eliminăm required atributele de la intrările de e-mail și parolă.

Trebuie să schimbăm valoarea atributului de tip pentru introducerea e-mailului.

<input autofocus class="dkh-form-field__input" type="text" name="email" id="email" required placeholder="Email">

De asemenea, trebuie să eliminăm minlength atribut din introducerea parolei.

<input class="dkh-form-field__input" name="password" type="password" id="password" required placeholder="Password">

Actualizarea acestor atribute elimină validarea bazată pe browser în favoarea propriei noastre logici de validare. Iată cum vor fi redate mesajele noastre de eroare personalizate:

1612005846 720 Cum sa construiesti si sa validezi forme frumoase cu Vanilla

Stiluri

Las CSS până la final, deoarece, din experiența mea personală, este puțin mai greu să mă concentrez pe logică atunci când designul vizual este complet.

Atunci când o componentă sau o pagină „arată” făcută la ochi, poate crea un sentiment fals că este realizată. Nu am nicio cercetare care să susțină acest lucru, ci doar părerea mea personală.

Iată starea codului nostru după ce adăugăm destul de puțin CSS.

Desktop

1612005846 527 Cum sa construiesti si sa validezi forme frumoase cu Vanilla

Mobil

Stare de eroare

1612005846 598 Cum sa construiesti si sa validezi forme frumoase cu Vanilla

Am inclus font minunat pictograme pentru butoanele Github și Twitter.

<div class="dkh-form-header">
  <div>
    <small>Sign up with</small>
    <div class="dkh-form-header__social-wrapper">
      <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-github">
        <i class="fab fa-github fa-lg"></i>
        Github
      </button>
      <button type="button" class="dkh-btn dkh-btn-icon dkh-btn-twitter">
        <i class="fab fa-twitter fa-lg"></i>
        Twitter
      </button>
    </div>
  </div>
</div>

rezumat

Am creat elementele de bază pentru a crea formulare de înscriere și logare fără biblioteci terțe. Puteți verifica codul sursă final Aici.

Dacă utilizați un cadru precum React sau Vue, există o mulțime de biblioteci minunate de formulare și validare. Vă puteți sprijini pe ele pentru a face treaba rapid.

Cu toate acestea, dacă sunteți nou în dezvoltarea de software, v-aș încuraja să vă concentrați mai întâi pe elementele fundamentale înainte de a utiliza aceste instrumente.

Am primit primul loc de muncă ca dezvoltator acum cinci ani și călătoria mea în tehnologie mi-a schimbat pentru totdeauna viața în bine. Cred că este important să vă concentrați și să stăpâniți elementele fundamentale, astfel încât să puteți înțelege mai ușor instrumente precum React și Vue.

Una dintre problemele pe care am observat-o când desfășurarea unei întâlniri De ani de zile, eu însumi am fost că oamenii care erau noi în codificare au ajuns prea repede la biblioteci și cadre. Acest lucru a ajuns să îi facă rău și mulți s-au luptat în timpul interviurilor.

Dacă înveți cum să codezi și poți folosi ajutor, nu ezita să mă contactezi stare de nervozitate. Aștept cu nerăbdare să ajut oricum pot.