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.
<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>
<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>
<!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: