Validare si trimitere formular

Curs Javascript

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:

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.