Form Validation

Spread the love

Validarea datelor client-side (adica din browser) se face simplu folosind Form Validator.

Form validator e o extensie jQuery care se configureaza astfel :

    1. Se include libraria jQuery
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      sau local
      <script src="/path/to/jquery.min.js"></script>
    2. Se include extensia FormValidatornet
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
      sau o copie locala.
    3. Pentru fiecare camp din form pentru care se face validare sea adauga:
      <input data-validation="[tipuri]" data-validation-format="[setari]">
      [tipuri] si [setari] le voi detalia mai jos.
    4. <script>
      $.validate();
      </script>

Si gata !

Tipurile pot fi :

  • required – se pune pentru un camp obligatoriu
    <input type="checkbox" name="agreement" data-validation="required">
  • length – validare de lungime , care poate avea la setari : min[nr], max[nr], sau [nr]-[nr]

    <input type="text" data-validation="length" data-validation-length="max100"> - camp de maxim 100 caractere
    <input type="text" data-validation="length" data-validation-length="min20"> - Camp de minim 20 caractere
    <input type="text" data-validation="length" data-validation-length="50-200">  - Camp intre 50 si 200 caracterelength - validare de lungime
    
  • number – validare numerica (campul trebuie sa contina cifre)
     data-validation-allowing=„[setare]” – seteaza tipul de numar, exemplele sunt self-explanatory (cred) :

    <input type="text" data-validation="number" data-validation-allowing="float,negative">
    <input type="text" data-validation="number" data-validation-allowing="float" 
    		 data-validation-decimal-separator=",">
    <input type="text" data-validation="number" data-validation-allowing="range[1;100]">
    <input type="text" data-validation="number" data-validation-allowing="range[-50;30],negative">
    <input type="text" data-validation="number" data-validation-allowing="range[0.05;0.5],float">
  • alte tipuri :
    email, url, date, alphanumeric
    

De asemenea au validare RegEx (expresii regulate), validare „confirma parola”, captcha, putere parola, posibilitatea de personalizare a validattoarelor, pentru lista completa formvalidator.net