La principal utilitat de JavaScript en el maneig dels formularis és la validació de les dades introduïdes pels usuaris. Abans d’enviar un formulari a servidor, es recomana validar mitjançant Javascript les dades inserides per l’usuari. D’aquesta manera, si l’usuari ha comès algun error a l’omplir el formulari, se li pot notificar de forma instantània, sense necessitat d’esperar la resposta de servidor.
Notificar els errors de forma immediata mitjançant JavaScript millora la satisfacció de l’usuari amb l’aplicació (el que tècnicament es coneix com “millorar l’experiència d’usuari”) i ajuda a reduir la càrrega de processament al servidor.
Normalment, la validació d’un formulari consisteix a cridar a una funció de validació quan l’usuari prem sobre el botó d’enviament del formulari. En aquesta funció, es comproven si els valors que ha introduït l’usuari compleixen les restriccions imposades per l’aplicació.
Encara que hi ha tantes possibles comprovacions com a elements de formulari diferents, algunes comprovacions són molt habituals: que s’ompli un camp obligatori, que se seleccioni el valor d’una llista desplegable, que l’adreça d’email indicada sigui correcta, que la data introduïda sigui lògica, que s’hagi introduït un nombre on així es requereix, etc.
A continuació es mostra el codi JavaScript bàsic necessari per incorporar la validació a un formulari:
<form action="" method="" name="" onsubmit="return validacion()"> ...</form>
I l’esquema de la funció validacion() és el següent:
function validacion() { if (condicion que debe cumplir el primer campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } else if (condicion que debe cumplir el segundo campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } ... else if (condicion que debe cumplir el último campo del formulario) { // Si no se cumple la condicion... alert(' El campo debe tener un valor de...'); return false; } // Si el script ha llegado a este punto, todas las condiciones // se han cumplido, por lo que se devuelve el valor true return true;}
el funcionament d’aquesta tècnica de validació es basa en el comportament de l’esdeveniment onsubmit de JavaScript. A l’igual que altres esdeveniments com onclick i onkeypress, l’esdeveniment 'onsubmit varia el seu comportament en funció de la valor que es retorna.
Així, si l’esdeveniment onsubmit retorna el valor true, el formulari es envia com ho faria normalment. No obstant això, si l’esdeveniment onsubmit retorna el valor false, el formulari no s’envia. La clau d’aquesta tècnica consisteix a comprovar tots i cadascun dels elements de l’formulari. En quan es troba un element incorrecte, es torna el valor false. Si no es troba cap error, es torna el valor true.
Per tant, en primer lloc es defineix l’esdeveniment onsubmit d’el formulari com:
onsubmit="return validacion()"
com el codi JavaScript torna el valor resultant de la funció validacion(), el formulari només s’enviarà a l’servidor si aquesta funció retorna true. En el cas que la funció validacion() retorni false, el formulari romandrà sense enviar-se.
Dins de la funció validacion() es comproven totes les condicions imposades per l’aplicació. Quan no es compleix una condició, es retorna false i per tant el formulari no s’envia. Si s’arriba a la fi de la funció, totes les condicions s’han complert correctament, de manera que es retorna true i el formulari s’envia.
La notificació de els errors comesos depèn de el disseny de cada aplicació. En el codi de l’exemple anterior simplement es mostren missatges mitjançant la funció alert() indicant l’error produït. Les aplicacions web més ben dissenyades mostren cada missatge d’error a la banda de l’element de formulari corresponent i també solen mostrar un missatge principal indicant que el formulari conté errors.
Un cop definit l’esquema de la funció validacion(), s’ha d’afegir a aquesta funció el codi corresponent a totes les comprovacions que es realitzen sobre els elements de l’formulari. A continuació, es mostren algunes de les validacions més habituals dels camps de formulari.
7.3.1. Validar un camp de text obligatori
Es tracta de forçar a l’usuari a introduir un valor en un quadre de text o textarea en què sigui obligatori. La condició en JavaScript es pot indicar com:
valor = document.getElementById("campo").value;if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) { return false;}
Perquè es de per completat un camp de text obligatori, es comprova que el valor introduït sigui vàlid, que el nombre de caràcters introduït sigui més gran que zero i que no s’hagin introduït només espais en blanc.
La paraula reservada null és un valor especial que s’utilitza per indicar “cap valor”. Si el valor d’una variable és null, la variable no conté cap valor de tipus objecte, array, numèric, cadena de text o booleà.
La segona part de la condició obliga que el text introduït tingui una longitud superior a zero caràcters, és a dir, que no sigui un text buit.
Finalment, la tercera part de la condició (/^\s+$/.test(valor)) obliga que el valor introduït per l’usuari no només estigui format per espais en blanc. Aquesta comprovació es basa en l’ús de “expressions regulars”, un recurs habitual en qualsevol llenguatge de programació però que per la seva gran complexitat no es van a estudiar. Per tant, només cal copiar literalment aquesta condició, posant especial cura en no modificar cap caràcter de l’expressió.
7.3.2. Validar un camp de text amb valors numèrics
Es tracta d’obligar a l’usuari a introduir un valor numèric en un quadre de text. La condició JavaScript consisteix en:
valor = document.getElementById("campo").value;if( isNaN(valor) ) { return false;}
Si el contingut de la variable valor no és un nombre vàlid, no es compleix la condició. L’avantatge d’utilitzar la funció interna isNaN() és que simplifica les comprovacions, ja que JavaScript s’encarrega de tenir en compte els decimals, signes, etc.
A continuació es mostren alguns resultats de la funció isNaN():
isNaN(3); // falseisNaN("3"); // falseisNaN(3.3545); // falseisNaN(32323.345); // falseisNaN(+23.2); // falseisNaN("-23.2"); // falseisNaN("23a"); // trueisNaN("23.43.54"); // true
7.3.3. Validar que s’ha seleccionat una opció d’una llista
Es tracta d’obligar a l’usuari a seleccionar un element d’una llista desplegable. El següent codi JavaScript permet aconseguir-ho:
indice = document.getElementById("opciones").selectedIndex;if( indice == null || indice == 0 ) { return false;}<select name="opciones"> <option value="">- Selecciona un valor -</option> <option value="1">Primer valor</option> <option value="2">Segundo valor</option> <option value="3">Tercer valor</option></select>
A partir de la propietat selectedIndex , es comprova si l’índex de l’opció seleccionada és vàlid ia més és diferent de zero. La primera opció de la llista (- Selecciona un valor –) no és vàlida, pel que no es permet el valor 0 per a aquesta propietat selectedIndex.
7.3.4. Validar una adreça de correu electrònic
Es tracta d’obligar a l’usuari a introduir una adreça de correu electrònic amb un format vàlid. Per tant, el que es comprova és que la direcció sembli vàlida, ja que no es comprova si es tracta d’un compte de correu electrònic real i operativa. La condició JavaScript consisteix en:
valor = document.getElementById("campo").value;if( !(/\w+(\w+)*@\w+(\w+)*\.\w+(\w+)/.test(valor)) ) { return false;}
La comprovació es realitza novament mitjançant les expressions regulars, ja que les adreces de correu electrònic vàlides poden ser molt diferents. D’altra banda, com l’estàndard que defineix el format de les adreces de correu electrònic és molt complex, l’expressió regular anterior és una simplificació. Encara que aquesta regla valida la majoria d’adreces de correu electrònic utilitzades pels usuaris, no suporta tots els diferents formats vàlids de correu electrònic.
7.3.5. Validar una data
Les dates solen ser els camps de formulari més complicats de validar per la multitud de formes diferents en què es poden introduir. El següent codi assumeix que d’alguna manera s’ha obtingut l’any, el mes i el dia introduïts per l’usuari:
var ano = document.getElementById("ano").value;var mes = document.getElementById("mes").value;var dia = document.getElementById("dia").value;valor = new Date(ano, mes, dia);if( !isNaN(valor) ) { return false;}
la funció Date(ano, mes, dia) és una funció interna de JavaScript que permet construir dates a partir de l’any, el mes i el dia de la data. És molt important tenir en compte que el nombre de mes s’indica de 0 a 11, sent 0 el mes de gener i 11 el mes de desembre. Els dies del mes segueixen una numeració diferent, ja que el mínim permès és 1 i el màxim 31.
la validació consisteix a intentar construir una data amb les dades proporcionades per l’usuari. Si les dades de l’usuari no són correctes, la data no es pot construir correctament i per tant la validació de l’formulari no serà correcta.
7.3.6. Validar un nombre de DNI
Es tracta de comprovar que el nombre proporcionat per l’usuari es correspon amb un nombre vàlid de document nacional d’identitat o DNI. Encara que per a cada país o regió els requisits de el document d’identitat de les persones poden variar, a continuació es mostra un exemple genèric fàcilment adaptable. La validació no només ha de comprovar que el nombre estigui format per vuit xifres i una lletra, sinó que també cal comprovar que la lletra indicada és correcta per al número introduït:
valor = document.getElementById("campo").value;var letras = ;if( !(/^\d{8}$/.test(valor)) ) { return false;}if(valor.charAt(8) != letras) { return false;}
La primera comprovació assegura que el format de l’nombre introduït és el correcte, és a dir, que està format per 8 números seguits i una lletra. Si la lletra està a el principi dels nombres, la comprovació seria /^\d{8}$/. Si en comptes de vuit números i una lletra, es requereixen deu números i dues lletres, la comprovació seria /^\d{10}{2}$/ i així successivament.
La segona comprovació s’aplica l’algoritme de càlcul de la lletra de l’DNI i la compara amb la lletra proporcionada per l’usuari. L’algorisme de cada document d’identificació és diferent, de manera que aquesta part de la validació s’ha d’adaptar convenientment.
7.3.7. Validar un número de telèfon
Els números de telèfon poden ser indicats de formes molt diferents: amb prefix nacional, amb prefix internacional, agrupat per parells, separant els números amb guions, etc.
El següent script considera que un número de telèfon està format per nou dígits consecutius i sense espais ni guions entre les xifres:
valor = document.getElementById("campo").value;if( !(/^\d{9}$/.test(valor)) ) { return false;}
Un cop més, la condició de JavaScript es basa en l’ús d’expressions regulars, que comproven si el valor indicat és una successió de nou números consecutius. A continuació hi ha altres expressions regulars que es poden utilitzar per a altres formats de número de telèfon:
| Nombre | Expressió regular | Format |
|---|---|---|
900900900 |
/^\d{9}$/ |
9 xifres seguides |
900-900-900 |
/^\d{3}-\d{3}-\d{3}$/ |
9 xifres agrupades de 3 en 3 i separades per guions |
900 900900 |
/^\d{3}\s\d{6}$/ |
9 xifres, les 3 primeres separades per un espai |
900 90 09 00 |
/^\d{3}\s\d{2}\s\d{2}\s\d{2}$/ |
9 xifres, les 3 primeres separades per un espai, les següents agrupades de 2 en 2 |
(900) 900900 |
/^\(\d{3}\)\s\d{6}$/ |
9 xifres, les 3 primera s tancades per parèntesi i un espai de separació respecte de la resta |
+34 900900900 |
/^\+\d{2,3}\s\d{9}$/ |
Prefix internacional (+ seguit de 2 o 3 xifres), espai en blanc i 9 xifres consecutives |
7.3.8. Validar que un checkbox ha estat seleccionat
Si un element de tipus checkbox s’ha de seleccionar de forma obligatòria, JavaScript permet comprovar-ho de forma molt senzilla:
elemento = document.getElementById("campo");if( !elemento.checked ) { return false;}
Si es tracta de comprovar que tots els checkbox del formulari han estat seleccionats, és més fàcil utilitzar un bucle:
formulario = document.getElementById("formulario");for(var i=0; i<formulario.elements.length; i++) { var elemento = formulario.elements; if(elemento.type == "checkbox") { if(!elemento.checked) { return false; } }}
7.3.9. Validar que un radiobutton ha estat seleccionat
Tot i que es tracta d’un cas similar a el dels checkbox, la validació dels radiobutton presenta una diferència important: en general, la comprovació que es realitza és que l’usuari hagi seleccionat algun radiobutton dels que formen un determinat grup. Mitjançant JavaScript, és senzill determinar si s’ha seleccionat algun radiobutton d’un grup:
opciones = document.getElementsByName("opciones");var seleccionado = false;for(var i=0; i<opciones.length; i++) { if(opciones.checked) { seleccionado = true; break; }}if(!seleccionado) { return false;}
L’anterior exemple recorre tots els radiobutton que formen un grup i comprova element per element si ha estat seleccionat. Quan es troba el primer radiobutton seleccionat, se surt de l’bucle i s’indica que al menys un ha estat seleccionat.