In acest tutorial e prezentat modul prin care se pot verifica /valida pe partea de client (cu JavaScript) valorile adaugate in campuri text in formular, caracterele permise (specificate cu un cod RegExp) si numarul lor.
Aici e un exemplu simplu, cu 3 casute de text. Se preia datele din fiecare camp din formular si se verifica pe rand fiecare.
Similar se apica si la formulare cu mai multe casute de tip text si textarea. Vedeti explicatiile de mai jos si cele din cod.

<i>- Numele si Parola trebuie sa contina doar numere, litere si liniute "-", "_".<br/>
- Numele intre 3 si 18 caractere, Parola intre 7 si 18 caractere.</i>
<form action="" method="post" onsubmit="return checkForm(this);">
 <label for="nume1">Nume:</label> <input type="text" name="nume1" id="nume1" /><br/>
 <label for="pass1">Parola:</label> <input type="password" name="pass1" id="pass1" /><br/>
 <label for="email1">E-mail:</label> <input type="text" name="email1" id="email1" /><br/>
 <input type="submit" name="fsubmit" id="fsubmit" value="Submit" />
</form>
<script type="text/javascript"><!--
// RegExp care sa permite doar litere, numere si liniute "-", "_"
var regx_chr = /^([a-zA-Z0-9_-]+)$/;
var regx_mail = /^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4})$/;    // RegExp pt. adresa e-mail

// Functia care e apelata la "onsubmit"
// preia campurile din formular, verifica /valideaza datele adaugate
function checkForm(frm1) {
  var fre = false;             // variabila ce va fi returnata de functie

  // preluare casete formular
  var nume1 = frm1.nume1;
  var pass1 = frm1.pass1;
  var email1 = frm1.email1;

  // verificare valori (Nume, Parola, E-mail), daca sunt incorecte, returneaza alert si selecteaza casuta
  if(nume1.value.length<3 || nume1.value.length>18 || nume1.value.search(regx_chr)==-1) {
    alert('Numele trebuie sa contina intre 3 si 18 caractere \nNumere, Litere, "-" si "_"');
    nume1.select();    // selecteaza casuta pt. Nume
  }
  else if(pass1.value.length<7 || pass1.value.length>18 || pass1.value.search(regx_chr)==-1) {
    alert('Parola trebuie sa contina intre 7 si 18 caractere \nNumere, Litere, "-" si "_"');
    pass1.select();    // selecteaza casuta pt. Parola
  }
  else if(email1.value.search(regx_mail)==-1) {
    alert('Adaugati o adresa de e-mail corecta');
    email1.select();    // selecteaza casuta pt. E-mail
  }
  else fre = true;

  return fre;
}
--></script>
Cand se apasa butonul Submit (sau Enter in casuta) pentru trimitere formular, e activat evenimentul "onsubmit" care prin "return checkForm(this);" apeleaza si returneaza rezultatul functiei "checkForm()".
- "this" reprezinta "acesta", adica formularul.
Functia returneaza valoarea unei variabile (fre) setata initial false.
Parametrul "frm1" retine formularul, transferat cu "this".
Formula "frm1.nume_casuta" preia acea casuta din formular ("nume_casuta" e numele casutei adagata la atributul "name").
Prin adaugarea lui "value" se preia valoarea /datele din ea, iar cu "length" se obtine numarul de caractere.
Daca la verificarea datelor valorile nu corespund cu cele ce trebuie adaugate, afiseaza un mesaj in fereastra alert, iar variabila "fre" returnata ramane false, ceea ce determina netrimiterea formularului.
Daca valorile sunt corecte, ultima instructiune: "else fre = true;" , seteaza variabila true, ceea ce determina trimiterea formularului.

- Codul de mai sus va afisa urmatorul formular:
- Numele si Parola trebuie sa contina doar numere, litere si liniute "-", "_".
- Numele intre 3 si 18 caractere, Parola intre 7 si 18 caractere.



Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Verificare si Validare caractere din formular

Last accessed pages

  1. Introducere in HTML (9327)
  2. Curs HTML gratuit Tutoriale HTML5 (34469)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (25609)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (39360)
  5. Numerale, Numere in limba engleza - Numerals (25193)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1987)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1683)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1589)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1448)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1172)