Validare Formular

Inainte de a trimite datele dintr-un formular la un script de pe server, este indicata efectuarea unor minime verificari a campurilor din formular, pe partea de client, precum numarul de caractere din casetele pt. text si forma corecta a adresei de e-mail.


In exemplu de mai jos se foloseste jQuery pentru a valida urmatorul formular (doua casete de tip text, doua butoane radio, o lista select si un textarea).
<form action="script.php" method="post">
 Nume: <input type="text" name="nume" id="nume" /><br />
 E-mail: <input type="text" name="email" id="email" /><br />
 <span id="gen">
  Gen: <input type="radio" name="gen" value="barbat" />Barbat
  <input type="radio" name="gen" value="femeie" />Femeie
 </span><br />
 Varsta, intre: <select name="age" id="age">
  <option>..select..</option>
  <option value="5-10">5-10</option>
  <option value="11-18">11-18</option>
  <option value="19-30">19-30</option>
  <option value="31-50">31-50</option>
  <option value="51-70">51-70</option>
  <option value="71+">71+</option>
 </select><br />
 Mesaj:<br />
 <textarea name="msg" id="msg" rows="4" cols="33"></textarea><br />
 <input type="submit" name="submit" value="Trimite" />
</form>

Acum se scrie un cod jQuery care va detecta cand utilizatorul trimite formularul. Verifica daca in campul "nume" sunt adaugate cel putin doua caractere, daca adresa de e-mail are forma corecta, daca e bifat un buton radio si e selectata o optiune din select, si daca in textarea sunt adaugate cel putin 5 caractere.
Daca toate elementele din formular sunt completate corect, trimite formularul, altfel, adauga o clasa CSS class="error" la elementele nevalide, si afiseaza mesaj intr-o fereastra Alert.
Clasa "error" e definita intr-un stil CSS sa afiseze o bordura rosie.

Acesta este codul jQuery pentru validarea formularului de mai sus:
<style type="text/css"><!--
.error { border:2px solid red; }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // detecteaza cand se trimite un formular, preia datele din campuri si le verifica
  $('form').submit(function() {
    // preia valorile din fiecare element
    var name = $(this).find('input[name="nume"]');          // Nume
    var email = $(this).find('input[name="email"]');        // E-mail
    var gen = $(this).find(':radio:checked');                         // Gen
    var age = $(this).find('select[name="age"]');           // Varsta
    var msg = $(this).find('#msg');                                   // Mesaj

    // sterge clasa "error" din toate elementele
    // seteaza o variabila "error" folosita ca sa determine daca formularul va fi sau nu trimis
    $('*').removeClass('error');
    var error = 0;
    var regx = /^([a-z0-9_\-\.])+\@([a-z0-9_\-\.])+\.([a-z]{2,4})$/i;   // regexp pt. e-mail

          /* Verificare campuri (adauga clasa "error" la cele nevalide si seteaza error=1) */
    // verifica "name"
    if(name.val().length<2){
      name.addClass('error');
      error = 1;
    }
    // verifica "email"
    if(!regx.test(email.val())){
      email.addClass('error');
      error = 1;
    }
    // verifica radio input "gen", daca se returneaza 'undefined', nu e bifat,
    // adauga clasa "error" la elementul care include butoanele radio
    if(gen.val()==undefined){
      $('#gen').addClass('error');
      error = 1;
    }
    // verifica lista Select "age", daca valoarea e cea afisata initial, din primul <option>
    if(age.val()==age.find('option:first').val()){
      age.addClass('error');
      error = 1;
    }
    // verifica "msg"
    if(msg.val().length<5){
      msg.addClass('error');
      error = 1;
    }

    // daca variabila error e 0, trimite formularul
    // altfel afiseaza un mesaj intr-o fereastra Alert, si blocheaza trimiterea formularului, prin return false
    if(error==0) {
      $(tihs).submit();
    }
    else {
      alert('Completati toate campurile care au bordura rosie');
      return false;      // opreste trimiterea formularului
    }
  });
});
--></script>

- Functia val() returneaza valoarea unui element de formular.
- $(this).find('input[name="nume"]') - returneaza elementul input cu name="nume" din obiectul curent.
- $(this).find(':radio:checked') - returneaza butonul radio bifat, din obiectul curent.
- $(this).find('select[name="age"]') - returneaza elementul <select> cu name="age" din obiectul curent.
- $(this).find('#msg') - obtine elementul cu id="msg" din obiectul curent.

Trimitere date din formular cu Ajax

Pentru a trimite datele dintr-un formular cu Ajax la un script de pe server, trebuie sa adaugati perechile "name=valoare" ale campurilor din formular intr-un sir, separate prin "&". Acest lucru se poate realiza usor cu metoda jQuery serialize().
Metoda serialize() codifica un set de elemente intr-un sir pentru trimitere.
Dupa ce formularul e validat, daca nu sunt erori, se aplica aceasta metoda si se trimite cu Ajax sirul cu datele din formular.

Iata un examplu complet. Se valideaza formularul creat mai sus, apoi trimite datele din el cu jQuery ajax() la un script PHP (in fisierul "script.php"), iar raspunsul de la server il include intr-un <div> in pagina (mai multe detalii in comentariile din cod).
- Raspunsul de la scriptul PHP e un cod HTML cu datele din formular.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Validare Trimitere</title>
<style type="text/css"><!--
.error { border:2px solid red; }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // detecteaza cand se trimite un formular, preia datele din campuri si le verifica
  $('form').submit(function() {
    // preia valorile din fiecare element
    var name = $(this).find('input[name="nume"]');          // Nume
    var email = $(this).find('input[name="email"]');        // E-mail
    var gen = $(this).find(':radio:checked');                         // Gen
    var age = $(this).find('select[name="age"]');           // Age
    var msg = $(this).find('#msg');                                   // Mesaj

    // sterge clasa "error" din toate elementele
    // seteaza o variabila "error" folosita ca sa determine daca formularul va fi sau nu trimis
    $('*').removeClass('error');
    var error = 0;
    var regx = /^([a-z0-9_\-\.])+\@([a-z0-9_\-\.])+\.([a-z]{2,4})$/i;   // regexp pt. e-mail

          /* Verificare campuri (adauga clasa "error" la cele nevalide si seteaza error=1) */
    // verifica "name"
    if(name.val().length<2){
      name.addClass('error');
      error = 1;
    }
    // verifica "email"
    if(!regx.test(email.val())){
      email.addClass('error');
      error = 1;
    }
    // verifica radio input "gen", daca se returneaza 'undefined', nu e bifat,
    // adauga clasa "error" la elementul care include butoanele radio
    if(gen.val()==undefined){
      $('#gen').addClass('error');
      error = 1;
    }
    // verifica lista Select "age", daca valoarea e cea afisata initial, din primul <option>
    if(age.val()==age.find('option:first').val()){
      age.addClass('error');
      error = 1;
    }
    // verifica "msg"
    if(msg.val().length<5){
      msg.addClass('error');
      error = 1;
    }

    // daca variabila error e 0, aplica metoda serialize(), cu Ajax trimite sirul cu datele la server
    // altfel afiseaza mesaj in fereastra alert
    if(error==0) {
      var srl = $(this).serialize();

      $.ajax({
        type: 'post',
        url: 'script.php',
        data: srl,
        beforeSend: function() {
          // inainte sa efectueze cererea Ajax, afiseaza notificare de "Incarcare..." in "#resp"
          $('#resp').html('Incarcare...');
        },
        timeout: 10000,        // seteaza timpul maxim permis de executie a cererii (10 secunde)
        error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },     // afiseaza Alert cu eroare
        success: function(raspuns) {
          $('#resp').html(raspuns);
        }
      });
    }
    else { alert('Completati toate campurile care au bordura rosie'); }

    return false;      // opreste deschiderea paginii cand e trimis formularul
  });
});
--></script>
</head>
<body>
<div id="resp">Aici va fi afisat raspunsul de la server.</div>
<h4>Completati formularul si trimiteti datele</h4>
<form action="script.php" method="post">
 Nume: <input type="text" name="nume" id="nume" /><br />
 E-mail: <input type="text" name="email" id="email" /><br />
 <span id="gen">
  Gen: <input type="radio" name="gen" value="barbat" />Barbat
  <input type="radio" name="gen" value="femeie" />Femeie
 </span><br />
 Varsta, intre: <select name="age" id="age">
  <option>..select..</option>
  <option value="5-10">5-10</option>
  <option value="11-18">11-18</option>
  <option value="19-30">19-30</option>
  <option value="31-50">31-50</option>
  <option value="51-70">51-70</option>
  <option value="71+">71+</option>
 </select><br />
 Mesaj:<br />
 <textarea name="msg" id="msg" rows="4" cols="33"></textarea><br />
 <input type="submit" name="submit" value="Trimite" />
</form>
</body>
</html>
Demo:
Aici va fi afisat raspunsul de la server.

Nume:
E-mail:
Gen: Barbat Femeie
Varsta, intre:
Mesaj:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Validare si trimitere formular

Last accessed pages

  1. Lectii audio-video de limba engleza (4610)
  2. Exemple de conversatii in limba engleza (860)
  3. Scriere cod CSS (740)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (19365)
  5. Introducere (412)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2324)
  2. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  3. Creare si editare pagini HTML (1171)
  4. Curs HTML gratuit Tutoriale HTML5 (982)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (886)