Programació II
Pràctica 3
Pau Santesmasses
Octubre 2005
GMMD | UOC
/*------------------------------------------
VALIDACIÓ FROMULARI
-------------------------------------------*/
// MONITOR D'ACTIVITAT
function debug(missatge){
document.forms[1].debug.value+=missatge +"\n";
}
// LOCALITZACIÓ
// Definim les cadenes de localització per el formulari
// en català i castellà
function iniVarLocalitzacio() {
accio = "'index.html'"
locObligatori = (esCastella())?"Obligatorio":"Obligatori"
genere = (esCastella())?"Sexo":"Sexe"
avis = (esCastella())?"Los siguientes campos no son válidos:\n\n":"Els següents camps d’entrada no son vàlids:\n\n"
titol = (esCastella())?"Confirmación":"Confirmació"
}
// COMPROVACIÓ DEL IDIOMA DEL FORMULARI
// mirem la URI per determinar si el formulari es en castellà
function esCastella() {
if (window.location.href.indexOf("formulario")!=-1)
return true;
return false;
}
// COMPROVACIÓ DE CARÀCTERS
// alfabètics
function esLetra(caracter){
if (((caracter>="A") && (caracter<="Z")) || ((caracter>="a") && (caracter<="z"))) return true;
return false;
}
// numèrics
function esDigito(caracter){
if ((caracter>="0") && (caracter<="9")) return true;
return false;
}
// CANVI A MODE ENTRADA
// Quan l'usuari es disposa a omplir un camp canviem el color del text
// Si el camp contenia un avis el borrem
function modeEntrada(){
if (this.value == locObligatori) {
this.value = "";
}
this.style.color = "black";
}
// VALIDACIÓ DELS CAMPS
// Passem l'entrada de l'usuari, l'identificador i la classe del camp (on he especificat la obligatorietat )
// a un switch.
function validar(entrada,id,clase){
// Netegem l'entrada ( possibles espais, retorns, etc.)
var camp = document.getElementById(id)
entrada = (entrada)? entrada.replace(/^\s*|\s*$/,"") : "";
// Avisem a l'usuari si hi ha camps obligatoris que no tenen valor
// excloent el camps dia i mes ja que son del tipus select i IE no n'obté els valors
if (clase=="obligatori" && entrada == "" && id!="dia" && id!="mes"){
document.getElementById(id).value=locObligatori;
status = "Aquest camp es de caracter obligatori";
return false;
}
// si el camp no es obligatori, i no te valor, el donarem per vàlid
if (clase !="obligatori" && entrada == "") return true;
// Si tenim valor d'entrada (excepte l'avís d'obligatorietat) o els camps dia o mes
// els passem pel switch
if ((entrada != "" && entrada != locObligatori) || id=="dia" || id=="mes" ){
switch (id){
//Dia i mes de naixement: Si l'usuari ha seleccionat qualsevol valor el camp es vàlid
case "dia":
case "mes":
if(document.getElementById(id).selectedIndex==0) return false;
else return true;
break;
//Any de naixement: Si l'any es troba entre els darrers 110 el camp es vàlid
case "any":
if (entrada>1895 && entrada<2006) return true;
break;
//Sexe: Si l'usuari ha seleccionat qualsevol valor el camp es vàlid
case "masculi":
case "femeni":
for (i=0;i<2;i++){
if (document.getElementsByName("sexe")[i].checked==true) {
return true;
}
}
break;
//NIF: Si tenim 9 caràcters dels quals l'ultim es una lletra el camp es vàlid
case "nif":
if ((entrada.length==9) && esLetra(entrada.charAt(8))) {
for (i=0;i<8;i++){
if (!esDigito(entrada.charAt(i))) return false;
}
return true;
}
break;
// Numero adreça: si l'entrada es numèrica i no excedeix les 8 xifres el camp es vàlid
case "numero":
if (entrada.length<8 && !(isNaN(entrada))) return true;
break;
// Numero adreça: si l'entrada es numèrica i te exactament 5 xifres el camp es vàlid
case "codipostal":
if (entrada.length==5 && !(isNaN(entrada))) return true;
break;
// Email: si l'entrada es compleix les característiques de la següent
// expressió regular el camp es vàlid
case "email":
var model = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (model.test(entrada))return true;
break;
// Telefon: Netegem els espais. Si l'entrada es numèrica i te un mínim de 6 xifres
// el camp es vàlid
case "telefon":
case "mobil":
entrada=entrada.replace(/ /g,"")
if (entrada.length>5 && !isNaN(entrada)) return true;
break;
// Clau : si l'entrada te un mínim de 4 caràcters el camp es vàlid
case "clau":
if (entrada.length>4) return true;
break;
// Confirmació : si l'entrada te un mínim de 4 caràcters i es idèntica a l'anterior el camp es vàlid
case "confirmacioclau":
if (entrada.length>4 && entrada == document.getElementById("clau").value) return true;
break;
default:
return true;
}
}
}
// CREACIÓ DE LA PAGINA DE CONFIRMACIÓ
function crearConfirmacio(){
// Construïm les cel·les de la taula de confirmació amb els títols i els valors dels camps validats.
// Per trobar els títols, busquem per descendència en el DOM la etiqueta (label) o llegenda (legend)
// que correspon a cada camp. Netegem els caràcters innecessaris.
var cadenaHtml="";
for(i = 0; i < document.forms[0].elements.length; i++){
var element = document.forms[0].elements[i]
if(element.id=="dia"||element.id=="mes"||element.id=="any"){
cadenaHtml+=("<tr><td>" + element.parentNode.parentNode.childNodes[1].firstChild.nodeValue + ": " + element.parentNode.firstChild.nodeValue.replace(/ \*/g,"") + "</td><td>" + element.value +"</td></tr>\n");
}
else if(element.type=="text"){
cadenaHtml+=("<tr><td>" + element.parentNode.firstChild.nodeValue.replace(/ \*/g,"")+"</td><td>" + element.value +"</td></tr>\n");
}
if (element.type=="radio" && element.checked==true){
cadenaHtml+=("<tr><td>"+element.parentNode.childNodes[1].firstChild.nodeValue.replace(/ \*/g,"")+"</td><td>" + element.value +"</td></tr>\n");
}
}
// construïm la resta de la pagina i inserim la taula, el títol en la localització corresponent
// i el document on volem dirigir a l'usuari en tancar la pagina de confirmació
document.open("text/html","replace");
document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n');
document.write('<html xmlns="http://www.w3.org/1999/xhtml">\n');
document.write('<head>\n');
document.write('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n');
document.write('<title>Pau Santesmasses | Programacio 2 | Practica 3 | Confirmació Formulari</title>\n');
document.write('<link type="text/css" rel="stylesheet" href="estils/estils.css" />\n');
document.write('<link type="text/css" rel="stylesheet" href="estils/confirmacio.css" />\n');
document.write('</head>\n');
document.write('<body>\n');
document.write('<div class="modul">');
document.write('<h1>' + titol + '</h1>');
document.write("<table>\n");
document.write(cadenaHtml);
document.write("</table>\n");
document.write('<input id="tancar" type="button" value="tancar" onclick="window.location.href=' + accio + '" />\n');
document.write('</div>');
document.write('</body>\n');
document.write('</html>\n');
document.close();
}
//CONFIRMACIÓ FINAL DEL FORMULARI
function confirmarFormulari(){
// Creem cadenes buides per guardar el resultat de la validació i els camps que no la passin
var j=0;
resultat="";
errades="";
// La variable focus ens permetrà saber si ja hem donat focus al primer camp no valid.
var focus=false;
// Validem els camps i guardem a la variable resultat una llista dels identificadors i un 0 o un 1
// depenent del resultat de la validació
while (j < document.forms[0].elements.length){
var element=document.forms[0].elements[j]
if(element.type=="text"||element.type=="select-one"||element.type=="radio"){
if (validar(element.value,element.id,element.className)) {
resultat+=element.id + " 1 \n";
}
else {
resultat+=element.id + " 0 \n";
// A mes, guardarem a la variable errades la llegenda i la etiqueta d'aquells camps
// que no la passin. Igual que abans, les busquem al DOM per descendència.
if(element.type=="text" || element.type=="select-one"){
errades += element.parentNode.parentNode.childNodes[1].firstChild.nodeValue + ": " + element.parentNode.firstChild.nodeValue.replace(/ \*/g,"") + "\n";
}
// Cas especial: nomes volem una errada per la parella de camps 'radio'. Comprovem la existència de la llegenda 'Sexe'
// per determinar si l'errada ja ha estat registrada o no.
if (element.type=="radio"){
if (errades.indexOf(genere)==-1) errades += element.parentNode.parentNode.childNodes[1].firstChild.nodeValue + ": " + element.parentNode.childNodes[1].firstChild.nodeValue.replace(/ \*/g,"") + "\n\n";
}
// També seleccionem el primer camp no valid i aixequem
// la bandera 'focus' per a no passar el focus als propers camps no vàlids
if(!focus){
element.select();
focus=true;
}
}
}
j++;
}
// Si trobem zeros a la variable resultat la confirmació no es satisfactòria
if (resultat.indexOf("0")>0) return false;
//si no hi ha zeros, hem passat la confirmació.
return true;
}
// COMPROVACIÓ DELS CAMPS
// Si el l'entrada de l'usuari és vàlida: verd.
// Si no és vàlida: vermell.
function comprobarEntrada() {
if(validar(this.value,this.id,this.className)) this.style.color="YellowGreen";
else this.style.color="red";
}
//INICI
window.onload=function(){
// Inicialitzem les variables de localització
iniVarLocalitzacio();
// COMPROVACIÓ DELS CAMPS DURANT L'ENTRADA
// Assignem les funcions comprovar i modeEntrada a cada un dels camps que volem validar
// Aquesta comprovació prèvia es realitzara en sortir del camp
// El canvi a modeEntrada es realitzarà en entrar el camp.
// Si els camps tenen valor(a causa de recarregar el document) els comprovem
for (i = 0; i < document.forms[0].elements.length; i++){
var element = document.forms[0].elements[i]
if(element.type=="text"||element.type=="select-one"||element.type=="radio"){
element.onblur = comprobarEntrada;
element.onfocus = modeEntrada;
if(element.type=="text" && element.value!=""){element.focus();element.blur();}
}
}
// CONFIRMACIÓ DEL FORMULARI EN ENVIAR-LO
// Comprovem els camps una vegada mes
// Si el formulari es confirmat amb èxit cridem la pagina de confirmació
// Si el formulari no es del tot correcte comunicarem les errades a l'usuari
document.forms[0].onsubmit = function(){
if (confirmarFormulari()) {
crearConfirmacio();
}
else alert(avis +""+ errades)
return false;
}
}