În trecut, validarea formularului avea loc pe server, după ce o persoană a introdus deja toate informațiile sale și a apăsat butonul de trimitere.

În cazul în care informațiile erau incorecte sau lipseau, serverul ar trebui să trimită totul înapoi cu un mesaj în care îi spune persoanei să corecteze formularul înainte de a-l trimite din nou.

Acesta a fost un proces îndelungat și ar pune o mare parte din povară asupra serverului.

În aceste zile, JavaScript oferă o serie de modalități de a valida datele unui formular chiar în browser înainte de a le trimite la server.

Citește mai multCum se face o promisiune dintr-o funcție de apel invers în JavaScript

Iată codul HTML pe care îl vom folosi în următoarele exemple:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    // Form validation will go here
  </script>
</head>
<body>
  <form id="form">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">Username</td>
        <td><input type="text" id="username" /></td>
      </tr>
      <tr>
        <td align="right">Email Address</td>
        <td><input type="text" id="email-address" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" id="submit-btn" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

Validare de bază

Acest tip de validare implică verificarea tuturor câmpurilor obligatorii și asigurarea faptului că sunt completate corect.

Iată un exemplu de bază al unei funcții validate care afișează o alertă dacă numele de utilizator și adresa de e-mail sunt necompletate, altfel revine adevărat:

const submitBtn = document.getElementById('submit-btn');

const validate = (e) => {
  e.preventDefault();
  const username = document.getElementById('username');
  const emailAddress = document.getElementById('email-address');
  if (username.value === "") {
    alert("Please enter your username.");
    username.focus();
    return false;
  }
  if (emailAddress.value === "") {
    alert("Please enter your email address.");
    emailAddress.focus();
    return false;
  }
  
  return true;
}

submitBtn.addEventListener('click', validate);

Dar dacă cineva introduce un text aleatoriu ca adresă de e-mail? În prezent validate funcția va reveni în continuare adevărată. După cum vă puteți imagina, trimiterea de date proaste către server poate duce la probleme.

Aici intervine validarea formatului de date.

Validarea formatului de date

Citește mai multCum se generează un fișier de reducere GitHub din Microsoft Word utilizând TypeScript

Acest tip de validare privește de fapt valorile din formular și verifică dacă sunt corecte.

Validarea adreselor de e-mail este notoriu dificilă – există un număr mare de adrese de e-mail legitime și gazde și este imposibil să ghiciți toate combinațiile valide de caractere.

Acestea fiind spuse, există câțiva factori cheie care sunt comuni în toate adresele de e-mail valide:

  • O adresă trebuie să conțină un caracter @ și cel puțin un punct (.)
  • Caracterul @ nu poate fi primul caracter din adresă
  • . trebuie să vină cel puțin un personaj după caracterul @

Având în vedere acest lucru, poate dezvoltatorii folosesc regex pentru a determina dacă o adresă de e-mail este validă sau nu. Iată o funcție care Tyler McGinnis recomandă pe blogul său:

const emailIsValid = email => {
  return /^[^s@]+@[^s@]+.[^s@]+$/.test(email);
}

emailIsValid('free@[email protected]') // false
emailIsValid('[email protected]') // true

Adăugat la cod din ultimul exemplu, va arăta astfel:

const submitBtn = document.getElementById('submit-btn');

const validate = (e) => {
  e.preventDefault();
  const username = document.getElementById('username');
  const emailAddress = document.getElementById('email-address');
  if (username.value === "") {
    alert("Please enter your username.");
    username.focus();
    return false;
  }
    
  if (emailAddress.value === "") {
    alert("Please enter your email address.");
    emailAddress.focus();
    return false;
  }

  if (!emailIsValid(emailAddress.value)) {
    alert("Please enter a valid email address.");
    emailAddress.focus();
    return false;
  }
  
  return true; // Can submit the form data to the server
}

const emailIsValid = email => {
  return /^[^s@]+@[^s@]+.[^s@]+$/.test(email);
}

submitBtn.addEventListener('click', validate);

Constrângeri de formular HTML5

Citește mai multAutentificare utilizând Google în ASP.NET Core 2.0

Unele dintre constrângerile HTML5 utilizate în mod obișnuit pentru <input> sunt type atribut (de ex type="password"), maxlength, required și disabled.

O constrângere mai puțin utilizată este pattern atribut care ia o expresie regulată JavaScript.

Mai multe informatii